HTML5 input 태그의 특정 형식
안녕하세요, 오늘은 HTML5에서 <input> 태그의 특정 형식들에 대해 알아보도록 하겠습니다.
이전과는 달리 HTML5에서는 <input> 태그의 type 속성에 특정 형식을 지정함으로서 사용자로부터 손쉽게 원하는 형태 (날짜, 범위 등)를 입력받을 수 있게 되었습니다. 게다가 웹 브라우저 자체에서 유효성 검사까지 동시에 해 주니 (물론 서버측에서 한 번 더 해줘야 하지만, 이전에는 JS까지 별도로 짜야 했기 때문에 확실히 손이 덜 갑니다.) 개발자에게는 일석이조의 기능이라고 볼 수 있겠습니다.
하지만 모든 웹 브라우저들이 아래의 모든 형식들을 지원하는 것은 아닙니다 (특히 Mozilla Firefox나 Internet Explorer는 아래에 나열된 다양한 속성들 중 단 4개 (번외인 pattern 포함) 만 지원하고 있으며, IE의 경우에는 이 마저도 10.0 이상에서만 지원합니다...) 따라서 안타깝게도 아직까지는 마음 놓고 사용할 수 없다는 단점이 있습니다.
또 다른 단점은 오류 메시지나 컨트롤의 모양이 통일된 형태가 아니라 천차만별이며, 오류 메시지의 경우 CSS 등을 통해 사용자 정의 디자인을 사용할 수 없다는 점입니다. 이러한 단점들을 모두 상쇄하려면 유효성 검사의 경우에는 제가 이전에 소개드렸던 Parsley.js나 기타 Validator 라는 단어가 들어가는 스크립트를, 컨트롤 구현의 경우에는 jQuery UI와 같은 UI 프레임워크를 사용해야 합니다.
1. color
Google Chrome과 Opera에서만 지원되는 형식입니다. 색상 선택 상자를 띄워서 색상을 선택할 수 있게 해 줍니다.
2. date
날짜를 입력받는 경우에는 달력을 보여주는 것이 사용자 입장에서 편리하기 때문에 일반적으로는 jQuery UI의 Calendar를 이용해서 구현하는 편입니다. 하지만 이 속성을 사용하면 jQuery UI 없이도 달력을 띄울 수 있습니다. Google Chrome, Apple Safari 및 Opera에서만 지원합니다. 개인적으로 이전에 달력 구현때문에 고생해 본 저에게는 가장 마음에 드는 속성입니다.
3. datetime
날짜와 함께 시간을 입력받을 수 있습니다. 날짜의 경우는 위의 date와 같이 달력을 띄울 수도 있습니다. Apple Safari와 Opera에서만 지원하고 있습니다. 해당 형식은 권고안에서 삭제되었습니다.
4. datetime-local
날짜와 함께 시간을 입력받을 수 있습니다. 날짜의 경우는 위의 date와 같이 달력을 띄울 수도 있습니다. datetime-local 형식이 위의 datetime과 다른 점은 바로 사용자의 PC 설정에 맞추어 시간을 12시간제 또는 24시간제로 입력할 수 있다는 점입니다. Google Chrome, Apple Safari 및 Opera에서만 지원하고 있습니다. 해당 형식은 권고안에서 삭제되었습니다.
5. email
이메일 주소만을 입력받을 수 있습니다. 이메일 주소를 입력한 뒤 폼을 전송했을 때, 올바른 메일 주소가 아닌 경우에는 오류 메시지를 띄우고, 폼 전송을 중단합니다. 이 속성은 Mac용 Safari를 제외한 (iOS Safari에서는 지원) 모든 웹 브라우저에서 지원하고 있습니다 (IE의 경우 10.0 이상).
6. month
month라고 되어 있는데, 연도와 함께 월을 같이 입력받을 수 있습니다. date와 같이 입력 시 달력을 지원합니다. Google Chrome, Apple Safari 및 Opera에서만 지원하고 있습니다. 해당 형식은 권고안에서 삭제되었습니다.
7. number
숫자만을 입력받을 때 사용하며, 지정된 범위 안의 숫자만 입력받을 수도 있습니다. Mozilla Firefox를 제외한 모든 웹 브라우저에서 지원하고 있습니다 (IE의 경우 10.0 이상). 또한 아래와 같은 추가 속성들을 사용할 수 있습니다.
- max - 최대값
- min - 최소값
- step - 숫자 간 간격 (예를 들어 1에서 10까지 입력을 받을 때 2의 배수만 입력받으려면 step 속성에 2를 지정)
- value - 기본값
8. range
슬라이더 (Slider)를 이용하여 지정된 범위 내의 수를 입력받을 수 있습니다. 유일하게 모든 웹 브라우저에서 지원하고 있습니다 (IE의 경우 10.0 이상). 위의 number와 같이 아래와 같은 추가 속성들을 사용할 수 있습니다.
- max - 최대값
- min - 최소값
- step - 숫자 간 간격 (예를 들어 1에서 10까지 입력을 받을 때 2의 배수만 입력받으려면 step 속성에 2를 지정)
- value - 기본값
9. search
검색 필드에 사용할 수 있는 형식입니다. Google Chrome과 Apple Safari에서만 지원하고 있습니다. results 속성에 숫자를 지정하면 지정된 숫자 만큼의 이전 검색어들을 텍스트 상자 아래쪽에 나타나는 컨텍스트 메뉴 형태로 볼 수 있습니다. 이외에는 검색어 자동 저장을 위한 autosave, 순간 검색기능을 위한 incremental 속성이 있습니다. 모든 웹 브라우저에서 구현될 경우 꽤 유용할 것 같습니다.
10. tel
전화번호 형식은 모바일 웹 브라우저에서는 지원되나, PC의 웹 브라우저에서는 하나도 지원하는 브라우저가 없습니다. 따라서 아직까지는 모바일 전용 페이지에서나 사용할 형식이라고 보시면 됩니다. type="tel"이 지정된 경우에는 모바일 웹 브라우저에서 자동으로 일반 키보드가 아닌 다이얼 키패드를 띄워줍니다. 이는 안드로이드, iOS 둘 다 공통입니다.
11. time
시간을 입력받을 때 사용할 수 있는 형식입니다. 사용자의 사용자의 PC 설정에 맞추어 시간을 12시간제 또는 24시간제로 입력할 수 있으며, Google Chrome, Apple Safari 및 Opera에서만 지원하고 있습니다.
12. url
홈페이지, 블로그나 SNS 주소와 같은 URL (Uniform Resource Locator)을 입력받을 때 사용할 수 있는 형식입니다. 이 속성은 Mac용 Safari를 제외한 (iOS Safari에서는 지원) 모든 웹 브라우저에서 지원하고 있습니다 (IE의 경우 10.0 이상).
13. week
특정 연도의 특정한 주 (예를 들어 2014년 3번째 주)를 입력받을 때 사용할 수 있는 형식입니다. date 형식과 마찬가지로 달력을 이용할 수 있습니다. Google Chrome, Apple Safari 및 Opera에서만 지원합니다. 해당 형식은 권고안에서 삭제되었습니다.
14. 번외 - pattern
끝판왕의 등장입니다! 이 속성은 바로 정규식 표현 (Regular Expression)을 브라우저에서 검사해주는 속성입니다. 정규식을 이용하면 위에 정의되지 않은 자신만의 검사 패턴을 만들어낼 수 있습니다. 다만, 정규식 표현을 모르는 초보자에게는 좀 어려운 물건이 되겠네요. pattern 속성의 정규식 규칙은 JavaScript의 정규식을 따릅니다. 예를 들어 국내에서 사용되는 전화번호들의 형식을 -을 포함해 검사하고 싶다면, pattern="\d{2,3}\-\d{3,4}\-\d{4}"과 같이 지정해주면 됩니다. 그리고 pattern에 곁들여 사용할 수 있는 형식으로 title 속성이 있는데, 이를 통해 입력 값의 오류 발생 시 사용자에게 입력 값의 오류 내용이나, 올바른 입력 값 규칙을 알려줄 수 있습니다. 예를 들자면 title="올바른 전화번호를 입력하세요." 이런 식으로 사용할 수도 있겠지요. 이 속성은 Apple Safari를 제외한 모든 웹 브라우저에서 지원합니다 (IE의 경우 10.0 이상).
참고자료
W3C - HTML5 표준 권고안 (Recommendation)
CSS-Tricks - WebKit HTML5 Search Inputs
업데이트
* 2014년 10월 28일자로 HTML5 표준 권고안이 발표되어 이에 따라 삭제된 형식들에 취소선 적용