HTML의 <input> 태그에서 type 속성은 입력 필드의 형식을 지정하는 역할을 한다. 주요 type 속성의 종류를 정리하면 다음과 같다.
📌 1. 텍스트 입력 관련
type 값 |
설명 |
text |
기본 텍스트 입력 (한 줄 입력) |
password |
비밀번호 입력 (입력값이 ●●●로 표시됨) |
email |
이메일 주소 입력 (유효성 검사 적용 가능) |
search |
검색 입력 필드 (브라우저에서 X 버튼 제공 가능) |
url |
웹사이트 URL 입력 (유효성 검사 적용 가능) |
tel |
전화번호 입력 (모바일에서 전화번호 키패드 제공) |
📌 2. 숫자 및 범위 입력
type 값 |
설명 |
number |
숫자 입력 (최소/최대 값 설정 가능) |
range |
슬라이더를 이용한 숫자 입력 |
📌 3. 날짜 및 시간 입력
type 값 |
설명 |
date |
날짜 선택 (YYYY-MM-DD 형식) |
month |
연도 및 월 선택 (YYYY-MM 형식) |
week |
주 단위 선택 (YYYY-WXX 형식) |
time |
시간 선택 (HH:MM 형식) |
datetime-local |
날짜 및 시간 선택 (로컬 시간 기준) |
📌 4. 선택 옵션
type 값 |
설명 |
checkbox |
여러 개 중 다중 선택 가능 |
radio |
여러 개 중 하나만 선택 가능 |
📌 5. 파일 및 버튼 관련
type 값 |
설명 |
file |
파일 업로드 필드 |
image |
이미지를 버튼처럼 사용 |
button |
일반 버튼 (기능 없음, onclick으로 조작) |
submit |
폼 제출 버튼 |
reset |
입력 필드 초기화 버튼 |
📌 6. 숨겨진 값
type 값 |
설명 |
hidden |
화면에 표시되지 않는 숨겨진 데이터 필드 |
✅ 정리
text, password, email 등은 텍스트 입력용.number, range는 숫자 입력용.date, time, datetime-local 등은 날짜 및 시간 입력용.checkbox, radio는 선택 옵션 제공.file, submit, button 등은 파일 업로드 및 버튼 역할.hidden은 화면에 표시되지 않는 데이터 저장용.
type을 적절히 사용하면 HTML 폼을 더욱 직관적으로 만들 수 있다.