HTML5: Up and Running

Input Types

You know all about web forms, right? Make a <form>, add a few <input type="text"> elements and maybe an <input type="password">, and finish it off with an <input type="submit"> button.

You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms:

<input type="search">

See http://bit.ly/9mQt5C for search boxes

<input type="number">

See http://bit.ly/aPZHjD for spinboxes

<input type="range">

See http://bit.ly/dmLiRr for sliders

<input type="color">

See http://bit.ly/bwRcMO for color pickers

<input type="tel">

See http://bit.ly/amkWLq for telephone numbers

<input type="url">

See http://bit.ly/cjKb3a for web addresses

<input type="email">

See http://bit.ly/aaDrgS for email addresses

<input type="date">

See http://bit.ly/c8hL58 for calendar date pickers

<input type="month">

See http://bit.ly/cDgHRI for months

<input type="week">

See http://bit.ly/bR3r58 for weeks

<input type="time">

See http://bit.ly/bfMCMn for timestamps

<input type="datetime">

See http://bit.ly/c46zVW for precise, absolute date/timestamps

<input type="datetime-local">

See http://bit.ly/aziNkE for local dates and times

Checking for HTML5 input types uses detection technique #4 (see Detection Techniques). First, you create a dummy <input> element in memory:

var i = document.createElement("input");

The default input type for all <input> elements is "text". This will prove to be vitally important.

Next, set the type attribute on the dummy <input> element to the input type you want to detect:

i.setAttribute("type", ...