HTML 5 adds a new set of input types. With these new types browsers are becoming smarter about being able to handle data types without extra code and overhead.

The advantage is that the browser can assist with data validation, on-screen keyboard selection, and formatting. In most cases the browser can circle the input filed in red when the entered data does not match the proper type. This can be very useful when putting a web site together quickly without worrying about validation at the outset.

A major disadvantage is that browsers do not implement the fields the dame way. For the most part any browser that does not support the field, it will fall back to a basic text input. It is then important to have clear instructions to the user what is expected to be entered.

In this post, I’ll describe each of the new input types. An example will be given; both the code and an attempt at showing the input field. For best results load this in the latest browser version and use multiple browsers.

The search type signals to the browser to treat the input as a search box. Added to the input field can be an x to clear the box. The keyboard can be modified to reflect a search.

<input type="search" name="searchType">

Email

<input type="email" name="emailType" multiple/>

URL

<input type="url" name="urlType"/>

Telephone

<input type="tel" name="telType"/>

Number

<input type="number" name="numberType"/>

Range

<input type="range" name="rangeType"/>

Date

<input type="date" name="dateType"/>

Month

<input type="month" name="monthType"/>

Week

<input type="week" name="weekType"/>

Time

<input type="time" name="timeType"/>

Color

<input type="color" name="colorType"/>