어린왕자와 여우

HTML5 이전에 쓰던 Input type은 아래와 같다.

text 
password
checkbox
radio
submit
file
image
hidden
select
textarea
button

HTML5에 추가된 input type은 아래와 같다. 그런데 중요한 것은 여러 브라우저에서 공통적으로 동작하지는 않는다. 그래서 이 글에서는 input type이 브라우저별로 동작하는지의 여부를 알아보려고 한다.


1. datetime : A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC (국제표준시).

Chrome : 20.0, IE/EDGE : 13.0, Firefox : NOT SUPPORTED, Safari : NOT SUPPORTED, Opera : 10.1

2. datetime-local : A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.

Chrome : 20.0, IE/EDGE : 13.0, Firefox : NOT SUPPORTED, Safari : NOT SUPPORTED, Opera : 10.1

3. date : A date (year, month, day) encoded according to ISO 8601.
기본이 연도가 6자리까지 쓸 수 있는데, 4자리까지의 yyyy-mm-dd로 하기 위해서는 max="9999-12-31" 을 추가하면 된다.

 
Chrome : 20.0, IE/EDGE : 12.0, Firefox : 57.0, Safari : NOT SUPPORTED, Opera : 10.1

4. month : A date consisting of a year and a month encoded according to ISO 8601.

Chrome : 25.0, IE/EDGE : 12.0, Firefox : NOT SUPPORTED, Safari : NOT SUPPORTED, Opera : 10.1

5. week : A date consisting of a year and a week number encoded according to ISO 8601.

Chrome : 25.0, IE/EDGE : 12.0, Firefox : NOT SUPPORTED, Safari : NOT SUPPORTED, Opera : 10.1

6. time : A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.

Chrome : 20.0, IE/EDGE : 12.0, Firefox : 57.0, Safari : NOT SUPPORTED, Opera : 10.1

7. number : This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.

Chrome : YES, IE/EDGE : YES, Firefox : YES, Safari : YES, Opera : YES

8. range : The range type is used for input fields that should contain a value from a range of numbers.

Chrome : 4.0, IE/EDGE : 10.0, Firefox : 23.0, Safari : 3.1, Opera : 10.1

9. email : This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.

Chrome : 5.0, IE/EDGE : 10.0, Firefox : 4.0, Safari : 5.0, Opera : 10.1

10. url : This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

Chrome : YES, IE/EDGE : 10.0, Firefox : YES, Safari : YES, Opera : 10.1

11. search : Define a search field (like a site search, or Google search)

Chrome : 26.0, IE/EDGE : 10.0, Firefox : 4.0, Safari : 5.1, Opera : 12.1

12. tel : Define a field for entering a telephone number

Chrome : YES, IE/EDGE : 10.0, Firefox : YES, Safari : YES, Opera : 11.0

13. color : Show a color picker

Chrome : 20.0, IE/EDGE : 38.0, Firefox : 29.0, Safari : 10.1, Opera : 11.01

브라우저별로 완벽히 호환이 되지 않는다면 왜 HTML5가 표준이 될 수 있을까?
이 의문은 더 공부해보고 추가하도록 하겠다.
어느 정도 사용하는 IE버전이 정리된거 같아서 이제 HTML5도 표준처럼 사용해도 될 듯 하다.

추가) 2012.07.17

IE에서는 아직 완벽히 적용되지 않으므로 Javascript과 CSS로 수정이 필요하다고 한다.
또한, 아래의 경우처럼 필요한 요소를 추가해야 IE에서 제대로 Javascript나 CSS가 동작한다고 한다.

<!--[if IE]>
document.createElement("article");

...
<![endif]-->

if IE로 감싼 코드는 IE에서만 동작하는 코드가 된다.

참조 : https://www.w3schools.com/tags/att_input_type.asp