By aPOST in CSS — 2023년 12월 23일

HTML+CSS 기초 강의 - 16. 폼만들기 기초 5 - 호환성 문제가 있는 <input> 타입들

인터넷 익스플로러에서 지원되지 않는 <input> 태그 타입들

<input> 타입중 몇몇(주로 HTML5에서 추가된 타입들)은 인터넷 익스플로러에서는 지원되지 않습니다.

time 타입 같은 경우 인터넷 익스플로러 11에서는 지원되지만, 아래 따로 정리한 <input> 타입들은 인터넷 익스플로러 마지막 버전인 11에서도 지원이 되지 않습니다.

인터넷 익스플로러 11이 마지막으로 나온 것이 2013년 말이고 그 무렵 이후 나온 새로운 타입들은 전혀 지원되지 않는다고 보면 됩니다.

color, date 타입은 종종 사용하는 <input> 타입임에도 인터넷 익스플로러 호환성 문제를 염두해야하는 사이트에서는 이런 호환성 문제가 있는 타입들을 사용하는 대신 자바스크립트 라이브러리를 이용해 구현해야 합니다.

인터넷 익스플로러 사용자가 아직 적지 않은 국내 환경상 HTML5 표준 타입이라고 무작정 사용해서는 안됩니다.

타입	설명
url	URL 입력. 정상적인 URL 입력인지 폼 전송시 체크합니다. URL 포맷이 아닐 경우 경고를 띄우고 폼전송이 취소됩니다. email 과 마찬가지로 빈 내용에 대한 체크는 하지 않으므로 필수 항목인 경우 required 속성을 별도로 부여해야 합니다. * url 포맷을 엄격하게 체크하지는 않습니다. "[http:// \| https://]+[글자 \| 문자열]" 조건 정도만 체크하기 때문에 정밀한 url 체크를 하려면 자바스크립트로 정규표현식을 사용해 체크해야 합니다.
color	컬러 선택자를 표시해줍니다. 전에는 자바스크립트 라이브러리로 구현해 사용했지만, 이제는 웹 표준으로 컬러 선택자를 표시할 수 있습니다. 웹표준 컬러코드 값으로 기본값을 지정할 수 있습니다.
time	오전/오후 12시:60분 포맷으로 시간을 입력할 수 있는 입력 필드를 표시합니다. 직접 입력할 수도 있지만, 업/다운 화살표를 이용해 마우스로 오전/오후, 시간, 분 값을 증가/감소 시킬 수 있습니다. 폼 전송시 실제 전송값은 화면 표시와 달리 "24:60" 포맷으로 24시간 기준으로 변경됩니다. 기본 입력값 또한 24시간 포맷으로 입력해야 하며, "hh:mm" 포맷으로 입력합니다. 입력한 시간에 따라 자동으로 오전/오후로 시간이 처리되어 표시됩니다. 인터넷 익스플로러10 이하 버전에서는 지원되지 않습니다. 구버전 웹브라우저 호환성이 필요한 경우 사용하면 안됩니다. (실제로는 11버전에서도 지원되지 않습니다.)
date datetime-local week month	날짜, 시간과 관련된 값을 편리하게 입력/선택할 수 있는 입력 필드와 UI를 제공합니다. 각 필드는 포커스가 가면 오른쪽에 컨트롤이 표시되어 마우스로 값을 증감하거나 캘린더로 선택할 수 있는 방법을 제공합니다. date : 년도-월-일 포맷으로 날짜를 입력할 수 있습니다. 달력 형태의 캘린더로 년도-월-일을 선택할 수 있는 편리한 UI를 제공합니다. "yyyy-mm-dd" 포맷으로 기본값 지정이 가능합니다. datetime-local : 년도-월-일 시:분:초 를 입력할 수 있는 필드를 표시합니다. 년도-월-일은 date 타입처럼 캘린더로 선택할 수 있습니다. 시:분:초 는 time 타입과 입력/사용 방법이 동일합니다. 실제 폼 전송값은 "0000-00-00T24:60" 포맷으로 예를들어 "2018-11-22T23%3A23" 과 같은 형태가 됩니다. "%3A" 는 인코딩된 ":" 며, 날짜와 시간 사이에는 대문자 "T"로 구분을 합니다.. "yyyy-mm-ddThh:mm" 포맷으로 기본값 지정이 가능합니다. week : 0000년도, 00번째 포맷으로 해당 년도의 몇번째 주인지를 입력할 수 있습니다. 전송되는 폼 값은 "0000-W00" 포맷으로 주차 표시 앞에 대문자 W가 붙는 특징이 있습니다. "yyyy-Www" 포맷으로 기본값 지정이 가능합니다. month : 0000년 00월 포맷으로 년과 월을 입력하는 필드를 표시합니다. 폼 전송값은 "0000-00" 포맷입니다. 각 타입에 맞는 날짜, 시간 값 전체를 입력/선택하지 않은 경우 경고 메시지를 표시하며, 폼은 전송되지 않습니다. date 타입을 제외하고 국내 날짜, 시간 사용 환경에는 다소 맞지 않는 부분이 있기 때문에, 사용 빈도가 높지는 않습니다.