HTML5가 도입되면서 <input> 요소의 type 속성에는 기존의 text, checkbox, radio 등을 넘어서는 다양한 새로운 값들이 추가되었습니다. 이러한 새로운 입력 유형은 사용자가 올바른 형식의 데이터를 입력하도록 유도하고, 모바일 기기에서는 상황에 맞는 키패드를 자동으로 띄워주는 등 개발 편의성과 사용자 경험을 동시에 향상시켜 줍니다.
HTML5의 새로운 input 타입 목록
| 타입 | 설명 |
|---|---|
| color | 색상 선택기입니다. 색상환(color wheel)이나 스와치(swatch) 방식으로 표현됩니다. |
| date | 달력에서 날짜를 선택하는 입력 필드입니다. |
| datetime-local | 날짜와 시간을 함께 입력받으며, 시간대(time zone) 설정 항목은 포함되지 않습니다. |
| datetime | 시간대 정보를 포함한 전체 날짜 및 시간을 나타냅니다. 참고로 이 타입은 현재 HTML 표준에서 제외되었으며, 대신 datetime-local 사용이 권장됩니다. |
| 이메일 주소 형식의 입력값을 받습니다. 폼 제출 시 브라우저가 자동으로 유효성을 검사합니다. | |
| month | 특정 연도 안에서 원하는 월(month)을 선택합니다. |
| number | 숫자 값만 입력할 수 있는 필드입니다. |
| range | 지정된 범위 안에서 숫자를 선택하며, 일반적으로 슬라이더 형태로 화면에 표시됩니다. |
| search | 검색 엔진에 전달할 검색어를 입력받습니다. 예를 들어 브라우저 상단의 검색창이 대표적입니다. |
| tel | 전화번호 형식의 입력값을 받습니다. |
| time | 시간대 정보 없이 시간을 선택하고 표시합니다. |
| url | URL 형식의 입력값을 받으며, 잘못된 형식일 경우 유효성 검사에서 오류가 발생합니다. |
| week | 특정 연도 안에서 원하는 주(week)를 선택합니다. |
새로운 input 타입을 활용하면 좋은 점
- 자동 유효성 검사: email, url, number 등의 타입은 별도의 JavaScript 코드 없이도 브라우저가 기본적인 형식 검증을 수행해 줍니다.
- 모바일 최적화: 스마트폰에서 tel 타입에는 숫자 키패드가, email 타입에는 @ 기호가 있는 키보드가 자동으로 표시되어 입력 오류를 줄여 줍니다.
- 네이티브 UI 활용: date, color, range 같은 타입은 브라우저가 제공하는 달력, 색상 팔레트, 슬라이더 위젯을 그대로 사용할 수 있어 개발 시간을 절약할 수 있습니다.
이처럼 HTML5의 새로운 input 타입을 적절히 활용하면 더 적은 코드로 더 안전하고 직관적인 폼을 만들 수 있습니다. 프로젝트의 요구 사항에 맞는 타입을 선택해 보시기 바랍니다.