HTML <input> 요소는 웹 폼에서 사용자의 입력을 캡처하는 핵심 컴포넌트입니다.
Input 입력 유형
텍스트 및 시맨틱 유형
| 유형 | 설명 |
|---|---|
text |
한 줄 일반 텍스트 입력 |
password |
문자가 마스킹 처리되는 비밀번호 입력 |
email |
브라우저 유효성 검사가 내장된 이메일 주소 입력 |
url |
절대 URL 입력 |
tel |
전화번호 입력 (모바일에서 전화 키패드 활성화) |
search |
지우기 버튼이 포함된 검색어 입력 |
숫자 및 범위 유형
| 유형 | 설명 |
|---|---|
number |
증감 단위가 지원되는 숫자 입력 (min, max, step) |
range |
대략적인 값을 선택할 수 있는 슬라이더 |
날짜 및 시간 유형
| 유형 | 설명 |
|---|---|
date |
달력 날짜 선택기 (연, 월, 일) |
time |
시간 선택기 (시, 분) |
datetime-local |
표준 시간대가 없는 로컬 날짜 및 시간 |
month |
연도 및 월 선택 |
week |
연도 및 ISO 주차 선택 |
선택 및 액션 유형
| 유형 | 설명 |
|---|---|
checkbox |
체크박스 토글 또는 다중 선택 |
radio |
동일 그룹 내 단일 선택 라디오 버튼 |
color |
색상 선택 팔레트 |
file |
파일 업로드 (accept, multiple) |
hidden |
화면에 표시되지 않고 폼과 함께 전송되는 숨겨진 필드 |
submit |
폼 데이터 제출 버튼 |
reset |
폼을 초기 상태로 되돌리는 초기화 버튼 |
button |
기본 동작이 없는 스크립트용 버튼 |
핵심 유효성 검사 속성
| 속성 | 동작 방식 |
|---|---|
required |
필수 입력 항목으로 비어 있으면 제출 방지 |
pattern="[A-Za-z0-9]+" |
입력값이 일치해야 하는 정규 표현식 (Regex) |
min="1" max="100" |
숫자 또는 날짜의 최솟값 및 최댓값 제한 |
step="0.5" |
숫자 증감의 유효 간격 |
minlength="5" maxlength="20" |
입력 가능한 최소 및 최대 문자 수 |
placeholder="..." |
입력 전 표시되는 안내 텍스트 |
readonly |
수정은 불가하지만 값은 전송됨 |
disabled |
필드를 비활성화하고 전송 대상에서 제외 |
autofocus |
페이지 로드 시 자동으로 포커스 이동 |
완전한 폼 구현 예제
<form action="/api/submit" method="POST">
<label for="user-email">이메일 주소:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">비밀번호 (최소 8자):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">나이:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
이용약관에 동의합니다
</label>
<input type="submit" value="회원가입" />
</form>