[꿀강] HTML5 Form 관련 태그들

HTML5에서 가장 효율적으로 변호된 부분이 form과 관련된 태그들이다.

새로 추가된 input type은 13개 정도가 된다.

추가된 input type은 다음과 같다.

 

Input Type	설 명
color	색상 값을 입력할 때 사용
date	날짜를 입력할 때 사용
datetime	날짜와 시간을 입력할 때 사용(타임 존 적용)
datetime-local	날짜와 시간을 입력할 때 사용(타임존 미적용)
email	이메일 주소를 입력할 때 사용
month	연도와 월을 입력할 때 사용
number	지정한 숫자를 입력할 때 사용
range	숫자와 범위를 지정할 때 사용
search	검색 폼을 지정할 때 사용
tel	전화번호를 입력할 때 사용
time	시간을 입력할 때 사용
url	URL을 입력 받을 때 사용
week	주를 입력 받을 때

 

 

input type을 모두 실행하면 아래와 같다.

코드작성은 <input type="color" name="">와 같은 형식으로 하면 되며,

새로 추가된 input type은 IE에서 지원하는 부분이 상당히 적기 때문에 Opera 브라우저에서 실행시켜 보았다.

 

 

 

그럼 하나씩 알아보도록 하겠습니다.

 

 

1. color

color는 input 자체에 색상값을 선택하는 것을 의미한다.

색상버튼을 누르면 아래와 같이 색상을 선택할 수 있는 창을 띄우게 된다.

 

 

 

2. date

date는 연도, 월, 일을 입력할 수 있게 도와준다.

우측에 ▼버튼을 누르면 캘린더가 나와 원하는 날짜를 선택할 수도 있으며, 상하 버튼을 눌러 직접 연도, 월, 일을 선택할 수도 있다.

 

 

 

3. datetime

datetime은 타임 존 기준으로 현재 날짜를 입력 받게 된다.

※ Opera 브라우저에서 지원이 된다고 했는데 직접 실행시키면 실행이 안된다.

   이유를 아시는분은 댓글 부탁 드립니다.

 

 

 

 

 

4. datetime-local

datetime-local은 현지 시간을 입력 받는 역할을 한다.

오페라만 지원하는 datetime보다는 크롬에서도 지원하는 datetime-local이 더 의미가 있다고 하겠다.

 

 

 

5. email

이메일 형식이 아닌 값을 입력할 경우 경고를 보내는 역할을 한다.

IE9부터는 IE 브라우저에서도 사용이 가능하다.

 

 

 

6. month

datetime-local과 달리 연도와 월까지만 입력을 받는다.

 

 

 

7. number

number는 지정된 숫자까지만 입력을 받게 하는 역할을 한다.

아래 예제에서는 min="1" max="5" 값으로 설정되어 있다.

 

 

 

8. range

range는 number와 같이 숫자를 지정해서 지정된 숫자범위 안에서 슬라이더 방식을 통해 값을 입력 받게 된다.

아래 예제에서는 min="1" max="10" 값으로 설정되어 있다.

 

 

 

9. search

사이트에서 검색을 할 경우에 사용된다.

이 부분은 일반적인 text 와 동일하나 우측에 X 버튼이 존재한다.

 

 

 

 

 

10. tel

데이스탑용 브라우저에서는 지원하지 않지만, 모바일 환경에서는 대단히 유용하다.

모바일 환경에서 전화번호 입력시 전화번호 입력에 최적화된 키보드가 나타나게 된다.

 

[사진 출처] https://cafe.naver.com/sjkdhj467/558115

 

 

11. time

time은 시간을 입력받는 연락을 한다.

 

 

 

12. url

url은 email과 동일하게 URL 형식을 갖추지 않는 값이면 공고 메시지를 보낸다.

 

 

 

13. week

week는 주에 대한 값을 입력 받을 수 있다.

 

 

 

HTML5는 특히 모바일 환경에서 아주 유용하게 사용된다.

url인 경우에는 .com이라는 키와 "."과 "/"가 키보드가 추가되어 보여지고,

tel에는 전화번호를 쉽게 입력할 수 있는 숫자 키패드가 보여지게 된다.

 

이처럼 앞으로는 모바일 환경에서 HTML5가 더욱 많이 사용될 것이라고 생각된다.