input 태그

✒️ 2025-05-16 11:14 내용 수정

참고 자료 : mdn web docs input attributes

<!-- 기본 -->
<input type="text">
<!-- 비밀번호 -->
<input type="password" id="password" required>
<!-- 이메일 -->
<input type="email" id="email" name="email" required>
<!-- 라디오버튼 -->
<input type="radio" id="male" name="gender" value="male" required>
<input type="radio" id="female" name="gender" value="female" required>
<!-- 체크박스 -->
<input type="checkbox" id="subscribe" name="subscribe">
<!-- submit 제출 동작 -->
<input type="submit" value="제출">
속성 속성값 설명
type input 태그의 종류를 지정
text 텍스트를 입력할 수 있는 공간
password 비밀번호 입력 필드
button 버튼
checkbox 체크 박스
radio 라디오 버튼
file 파일을 업로드할 수 있음
image 이미지를 입력 받는 필드
time 시간을 입력 받는 필드
date 날짜를 입력 받는 필드
datetime-local 날짜와 시간을 입력 받는 필드
week 주를 입력 받는 필드
month 월을 입력받는 필드
email 이메일
number 숫자 입력을 받는 필드
hidden 숨김
color 색
range 일정 범위 내 숫자 값을 선택할 수 있는 슬라이더
search 검색어를 입력 받는 필드
submit 폼을 제출하는 버튼
reset 폼 내용을 초기화하는 버튼
tel 전화번호를 입력 받는 필드
url 웹 주소를 입력 받는 필드
속성 타입 설명
type 전체 입력 필드 유형 지정
name 전체 전송 시 데이터 이름 지정
value image를 제외한 전체 입력 필드 초기값 설정
placeholder text, password, email 등 힌트 텍스트 표시
required hidden, range,
color, 버튼 제외 전체		 필수 입력 지정
readonly hidden, range, color,
checkbox, radio, 버튼 제외 전체		 읽기 전용 필드 설정
disabled 전체 입력 비활성화 처리
checked checkbox, radio 체크박스와 라디오 버튼 체크 여부
maxlength text, password, email 등 최대 입력 문자 수 제한
minlength text, password, email 등 최소 입력 문자 수 지정
min date, month, time, range 등 입력 허용 최소값 설정
max date, month, time, range 등 입력 허용 최대값 설정
step date, month, time, range 등 숫자 증가/감소 단위 지정
pattern text, password, email 등 정규식 기반 입력 값 검증
autocomplete checkbox, radio,
버튼 제외 전체		 자동 완성 기능 설정
on과 off값으로 설정
autofocus 페이지 로드시 자동 포커스 설정
multiple email, file 복수 항목 입력 허용
size text, password, email 등 입력 필드 표시 너비 지정
src image 이미지의 주소
<img>의 src 속성과 동일
width image 이미지의 너비
height image 이미지의 높이
list hidden, password,
checkbox, radio, 버튼 제외 전체		 자동 완성 옵션 연결
form 전체 특정 폼 요소와의 연결 설정
accept file 허용 파일 형식 지정 (파일 업로드 시) 
<body>
	<ol>
		<li>text 형식
			<ul>
				<li><input value="text를 입력하는 공간"></li>
				<li><input type="password"></li>
				<li><input type="search" placeholder="검색어를 입력해주세요"></li>
				<li><input type="tel" placeholder="전화번호를 입력해주세요"></li>
				<li><input type="url" placeholder="url을 입력해주세요"></li>
				<li><input type="email" placeholder="이메일을 입력해주세요"></li>
			</ul>
		</li>
		<hr>
		<li>button 형식
			<ul>
				<li><input type="button" value="버튼"></li>
				<li><input type="checkbox" value="체크박스"></li>
				<li><input type="radio" value="라디오버튼"></li>
				<li><input type="submit" placeholder="제출"></li>
				<li><input type="reset" value="형식 초기화"></li>
			</ul>	
		</li>
		<hr>
		<li>파일 첨부 형식
			<ul>
				<li><input type="file" placeholder="파일을 드래그해서 첨부"></li>
				<li><input type="image" placeholder="이미지를 드래그해서 첨부"></li>
			</ul>
		</li>
		<hr>
		<li>메뉴바 형식
			<ul>
				<li><input type="time"></li>
				<li><input type="date"></li>
				<li><input type="datetime-local"></li>
				<li><input type="week"></li>
				<li><input type="month"></li>
				<li><input type="color" value="red"></li>
				<li><input type="range" value="3"></li>
			</ul>
		</li>
	</ol>
	<input type="hidden" value="숨김">
</body>

input 1.png

input 2.png

input 3.png

input file

특성 설명
accept 허용할 파일 유형을 지정
capture 이미지 또는 비디오 데이터를 캡처할 때 사용할 방법 지정
files 선택한 파일을 나열
multiple 여러 개의 파일을 선택할 수 있음 
<input type="file" multiple accept="image/*"/>

function handleUpload(event) {

	const newImage = event.target.files[0];
	const fileType = event.target.files[0]?.type;

	console.log(event.target); // 이벤트 대상을 반환한다.
	console.log(event.target.files); // FileList를 반환한다.
	console.log(event.target.files[0]); // FileList의 0번째 요소에 대한 정보가 반환된다.

	if (fileType.includes('image')) {
		alert("이미지 업로드 성공!");
	} else {
		alert("이미지 파일만 업로드할 수 있습니다!");
		return;
	}
}

<input type="file" accept="image/*" onChange={handleUpload}/>

input_file 1.png

유효성 검사

<input type="text" pattern="[a-zA-Z]"/>

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

// javascript

// 한글과 밑줄 문자를 포함한 영문과 숫자로 구성된 2~13글자
const reg = /^[가-힣\w]{2,13}$/;

// pattern에 적용할 String
const str_reg = "^[가-힣\\w]{2,13}$";

<!-- string regex로 적용 -->
<input type="text" pattern={str_reg}/>

주의사항

Boostrap의 form validation에 적용하기

import { Form, FloatingLabel, InputGroup } from "react-bootstrap";
import { useState } from 'react';

function Login() {
	const [validated, setValidated] = useState(false); // 검사 진행 여부

	// 제출 동작
	const handleSubmit = (event) => {
		const form = event.currentTarget;
		if (form.checkValidity() === false) {
			event.preventDefault(); // 새로고침 방지
			event.stopPropagation(); // 진행 차단
		}

		// 검사 했음을 true로 변경
		setValidated(true);
	};
	
	return (
		<Form noValidate validated={validated}>
			<Form.Group md="4" controlId="email">
				<InputGroup hasvalidation>
					<FloatingLabel
						controlId="floatingInput"
						label="이메일(email)"
						className="mb-3"
						>
						
						<Form.Control
							required
							type="email"
							name="email"
							onChange={handleChange}
						/>
						<Form.Control.Feedback type="invalid">
							이메일을 입력해주세요
						</Form.Control.Feedback>
					</FloatingLabel>
				</InputGroup>
			</Form.Group>
		</Form.Group>
	)
}

input_bootstrap 1.png

input_bootstrap 2.png

input_bootstrap 3.png