HTML 입문 | HTML5 시작 | HTML5 입력(input) 요소 타입(type)
HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다.
- 숫자 입력(number)
- 입력 범위 지정(range)
- 색상 입력(color)
- 날짜 입력(date)
- 시간 입력(time)
- 날짜와 시간 입력(datetime-local)
- 연도와 월 입력(month)
- 연도와 주 입력(week)
- 이메일 입력(email)
- URL 주소 입력(url)
- 전화번호 입력(tel)
- 검색어 입력(search)
숫자 입력(number)
<input> 태그의 type 속성값을 “number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해준다.
number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점이다.
브라우저의 지원 여부에 따라 min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있다.
<input type="number" name="num" min="1" max="9">
number 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.
입력 범위 지정(range)
<input> 태그의 type 속성값을 “range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여줍니다.
0 <input type="range" name="favnum" min="1" max="9"> 9
range 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.
색상 입력(color)
<input> 태그의 type 속성값을 “color"로 설정하면, input 요소는 사용자가 색상을 입력할 수 있도록 해준다.
선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송된다.
브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여준다.
<input type="color" name="color" value="#FF0000">
color 타입은 사파리 9.1과 그 이전 버전, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.
날짜 입력(date)
<input> 태그의 type 속성값을 “date"로 설정하면, input 요소는 사용자가 날짜를 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여준다.
<input type="date" name="day1">
또한, min과 max 속성을 사용하여 날짜 선택에 제한값을 설정할 수도 있다.
<input type="date" name="day2" min="1977-01-01" max="2020-12-31">
date 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.
시간 입력(time)
<input> 태그의 type 속성값을 “time"로 설정하면, input 요소는 사용자가 시간을 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 시간을 선택하기 위한 도구를 보여준다.
<input type="time" name="time">
time 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.
날짜와 시간 입력(datetime-local)
<input> 태그의 type 속성값을 “datetime-local"로 설정하면, input 요소는 사용자가 날짜와 시간을 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더와 시간을 선택하기 위한 도구를 보여준다.
<input type="datetime-local" name="time">
datetime-local 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.
연도와 월 입력(month)
<input> 태그의 type 속성값을 “month"로 설정하면, input 요소는 사용자가 연도와 월을 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 연도와 월을 선택하기 위한 캘린더를 보여준다.
<input type="month" name="month">
month 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.
연도와 주 입력(week)
<input> 태그의 type 속성값을 “week"로 설정하면, input 요소는 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 연도와 주를 선택하기 위한 캘린더를 보여준다.
<input type="week" name="week">
week 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.
이메일 입력(email)
<input> 태그의 type 속성값을 “email"로 설정하면, input 요소는 사용자가 email 주소를 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 전송할 때 입력한 email 주소가 유효한 email 주소인지 자동으로 검사한다.
<input type="email" name="email">
email 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.
URL 주소 입력(url)
<input> 태그의 type 속성값을 “url"로 설정하면, input 요소는 사용자가 URL 주소를 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 전송할 때 입력한 URL 주소가 유효한 URL 주소인지 자동으로 검사한다.
<input type="url" name="url">
url 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.
전화번호 입력(tel)
<input> 태그의 type 속성값을 “tel"로 설정하면, input 요소는 사용자가 전화번호를 입력할 수 있도록 해준다.
<input type="tel" name="tel">
tel 타입은 사파리 8에서만 지원한다.
검색어 입력(search)
<input> 태그의 type 속성값을 “search"로 설정하면, input 요소는 사용자가 검색어를 입력할 수 있도록 해준다.
이러한 검색 필드는 보통의 텍스트 필드(text field)와 동일하게 동작한다.
search 타입이 일반 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 엑스(X) 표시가 생기는 점이다.
<input type="search" name="keyword">