This page uses a customized version of the Modernizr feature-detection JavaScript library to show which new HTML 5 form controls are implemented in the browser that you are using to view the page. Study the markup as you experiment with each control, if it is implemented in your browser, and check out any attributes you can modify or add to alter the behavior of that control.

The entire page consists of a single form illustrating (or trying to illustrate) those newer HTML 5 form controls. At the time of writing, browser support for these new "widgets" is uneven (some browsers implement a given widget, others don't) and inconsistent (even if two browsers do implement a given widget, they may not look or behave exactly the same in both). The page should therefore be tried in different browsers to see just which controls are actually implemented in which browsers, if any, before using any particular control. Use only those controls that have broad support or that are at least implemented in the browser(s) employed by your user base, should you be so lucky as to have an identifiable user base and know which browser(s) they use.

Trying input element of type color:

Click to choose a color:

Trying input element of type date:

Click to enter your birthday:

Trying input element of type datetime:

Click to enter your arrival date and time (including time zone):

Trying input element of type datetime-local:

Click to enter your arrival date and time (without time zone):

Trying input element of type email:

Click to enter your e-mail:

Trying input element of type month:

Click to enter month and year of your graduation:

Trying input element of type number:

Click to enter a number (integer) from 1 to 10, inclusive:

Trying input element of type range:

Click to choose a volume from this range of values: 38

Trying input element of type search:

Click to enter a search string:

Trying input element of type tel:

Click to enter your telephone number:

Trying input element of type time:

Click to enter your arrival time:

Trying input element of type url:

Click to enter the URL of your home page:

Trying input element of type week:

Click to enter the week you would like to take vacation: