본문 바로가기

HTML&CSS

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

컬러 선택자를 표시해줍니다.

전에는 자바스크립트 라이브러리로 구현해 사용했지만, 이제는 웹 표준으로 컬러 선택자를 표시할 수 있습니다. 

웹표준 컬러코드 값으로 기본값을 지정할 수 있습니다.


<input type="color" name="webcolor" value="#fa4040">


time

오전/오후 12시:60분 포맷으로 시간을 입력할 수 있는 입력 필드를 표시합니다. 직접 입력할 수도 있지만, 업/다운 화살표를 이용해 마우스로 오전/오후, 시간, 분 값을 증가/감소 시킬 수 있습니다.



폼 전송시 실제 전송값은 화면 표시와 달리 "24:60" 포맷으로 24시간 기준으로 변경됩니다.

기본 입력값 또한 24시간 포맷으로 입력해야 하며, "hh:mm" 포맷으로 입력합니다.

입력한 시간에 따라 자동으로 오전/오후로 시간이 처리되어 표시됩니다.


<input type="time" name="dt" value="16:34">


인터넷 익스플로러10 이하 버전에서는 지원되지 않습니다. 구버전 웹브라우저 호환성이 필요한 경우 사용하면 안됩니다. (실제로는 11버전에서도 지원되지 않습니다.)

date

datetime-local

week

month

날짜, 시간과 관련된 값을 편리하게 입력/선택할 수 있는 입력 필드와 UI를 제공합니다.


각 필드는 포커스가 가면 오른쪽에 컨트롤이 표시되어 마우스로 값을 증감하거나 캘린더로 선택할 수 있는 방법을 제공합니다.




date : 년도-월-일 포맷으로 날짜를 입력할 수 있습니다. 달력 형태의 캘린더로 년도-월-일을 선택할 수 있는 편리한 UI를 제공합니다.

"yyyy-mm-dd" 포맷으로 기본값 지정이 가능합니다.


<input type="date" name="dt" value="2018-12-01">


datetime-local : 년도-월-일 시:분:초 를 입력할 수 있는 필드를 표시합니다. 년도-월-일은 date 타입처럼 캘린더로 선택할 수 있습니다. 시:분:초 는 time 타입과 입력/사용 방법이 동일합니다.

실제 폼 전송값은 "0000-00-00T24:60" 포맷으로 예를들어 "2018-11-22T23%3A23" 과 같은 형태가 됩니다. "%3A" 는 인코딩된 ":" 며, 날짜와 시간 사이에는 대문자 "T"로 구분을 합니다..

"yyyy-mm-ddThh:mm" 포맷으로 기본값 지정이 가능합니다.


<input type="datetime-local" name="dtl" value="2018-11-22T12:34">


week : 0000년도, 00번째 포맷으로 해당 년도의 몇번째 주인지를 입력할 수 있습니다. 전송되는 폼 값은 "0000-W00" 포맷으로 주차 표시 앞에 대문자 W가 붙는 특징이 있습니다.

"yyyy-Www" 포맷으로 기본값 지정이 가능합니다.


<input type="week" name="dtw" value="2018-W40">


month : 0000년 00월 포맷으로 년과 월을 입력하는 필드를 표시합니다. 폼 전송값은 "0000-00" 포맷입니다.


<input type="month" name="dtm" value="2018-11">



각 타입에 맞는 날짜, 시간 값 전체를 입력/선택하지 않은 경우 경고 메시지를 표시하며, 폼은 전송되지 않습니다. 



date 타입을 제외하고 국내 날짜, 시간 사용 환경에는 다소 맞지 않는 부분이 있기 때문에, 사용 빈도가 높지는 않습니다.


인터넷 익스플로러에서 지원되지 않는 타입을 사용하면 인터넷 익스플로러에는 다음과 같은 모양으로 출력됩니다.

업/다운 화살표나 캘린더, 컬러픽커 등이 전혀 지원되지 않으며, 일반 텍스트 필드로 출력됩니다.




color 타입을 구현해주는 자바스크립트 라이브러리


강의 범위에서는 한참 벗어나지만, 호환성 문제를 피하려면 자바스크립트 라이브러리를 가져다 써야하는 경우가 생기게 됩니다.

인터넷 익스플로러 호환성이 필요한 경우 color 타입의 <input> 태그를 대신해 JQuery 플러그인인 Color Picker 를 추천합니다.

UI도 깔끔하고, 범용성도 좋은 플러그인으로 사용층도 두텁습니다.


같은 이름으로 2가지 플러그인이 있는데 두가지 모두 괜찮습니다.


1. 오랫동안 버전업되어 안정성 및 범용성이 높음.

https://www.eyecon.ro/colorpicker/




2. 심플하고 가벼움. 기본적인 컬러 처리 및 사용자 액션 메써드들을 잘 제공해서 사용하기가 쉽습니다.

https://tovic.github.io/color-picker/




< 이전강의 다음강의 >



닫기