새로 생긴 Input 태그의 유형들

이메일 주소 필드 - type="email"

기존 HTML에서는 이메일 주소를 입력하려면 일반 텍스트를 입력하는 텍스트 필드를 사용한 후 자바스크립트를 이용해서 이메일 형식에 맞는지 체크해야 했습니다. 이메일 주소 형식에는 반드시 '@'이라는 문자가 들어가기 때문에 이 문자가 포함되어 있는지 여부를 체크하는 간단한 함수를 이용하기도 하고, '@'문자를 포함할 뿐 아니라 '@'뒤에 정확하게 도메인이 적혀 있는지 체크하기도 합니다.
하지만 HTML5에서는 아주 쉽게 이메일 주소를 입력하는 필드를 만들 수 있습니다. 따라서 이 필드만 사용하면 사용자가 입력하는 단계에서 입력한 값이 이메일 주소인지 아닌지를 확인할 수 있기 때문에 별도의 자바스크립트 함수를 사용하지 않아도 됩니다.

이메일 주소 필드와 아이폰 입력 화면

모바일 기기에서는 키보드로 이메일 주소를 입력하기가 쉽지 않습니다.@이나 마침표(.)를 입력하려면 그때마다 키보드 입력 화면을 전환해야 하기 때문에 번거롭고 불편합니다.하지만 <input type="email">로 지정해 놓으면 사용자가 해당 필드에 포커스를 갖다 놓는 순간 자동으로 키보드 입력 화면이 전환됩니다.

웹 주소 필드 - type="url"

이메일 주소와 마찬가지로 웹 주소 필드도 지금까지 텍스트 필드로 사용되던 것을 세분화한 것입니다. 웹 주소는 'http://www.webguru.pe.kr'처럼 공백이 전혀 없고 영문자와 마침표, 그리고 슬래시(/)로만 이루어져 있습니다. 그리고 가장 많이 사용하는 도메인은 '.com'이지요.
따라서 <input type="url">로 되어 있는 필드에 입력하려고 할 경우 아이폰의 키보드 입력화면이 바뀝니다.

스핀 박스로 표시하는 숫자 필드 - type="number"

숫자 필드는 좀더 쉽게 숫자를 입력할 수 있도록 추가된 유형입니다. 직접 숫자를 입력하거나 스핀 박스의 화살표를 눌러 선택할 수도 있습니다.

<input type="number" min="최소값" max="최대값" step="간격" value="초기값">

숫자필드에서 사용할 수 있는 속성은 여러 가지인데 type="number"항목만 제외하고는 나머지는 모두 옵션 사항이므로 필요한 속성만 지정하면 됩니다. 전부 사용하지 않을 수도 있습니다.

슬라이드 막대로 표시하는 숫자 필드 - type="range"

type을 range로 설정하면 직접 숫자를 입력하는 대신 슬라이드 막대로 숫자를 조절할 수 있습니다.

<input type="range" min="최소값" max="최대값" step="간격" value="초기값">

날짜 필드

HTML4에서는 날짜 추출 컨트롤이 지원되지 않았기 때문에 날짜를 추출하려면 별도의 스크립트가 필요했습니다. 하지만 HTML5에는 날짜뿐 아니라 시간을 추출할 수 있는 컨트롤이 포함되어 있어서 아주 편리하게 사용할 수 있습니다.

<input type="date">

<input type="month">

<input type="week">

<input type="time">

<input type="datetime">

검색상자 필드 - type="search"

HTML4에서는 웹 페이지에 검색 상자를 삽입할 때 텍스트 필드를 이용했지만 HTML5에는 검색상자를 삽입하기 위한 별도의 유형이 추가 되었습니다.
대부분의 사이트들이 아직까지는 텍스트 필드를 이용해 검색 상자를 삽입하고 있지만 애플 사이트 (http://www.apple.com)의 검색 상자는 검색 상자 필드를 이용해서 만들어졌습니다.

색상 선택 필드 - type="color"

color 유형은 사용자가 색상을 선택하면 #ffccoo같은 색상의 16진수 값을 반환하도록 합니다.표준 규약이 완성되면 웹 브라우저에서 색상 선택 상자를 표시할 수 있을 것입니다.