HTML5 input Types

HTML5 introduces several new input types. With some of the new input types come new, native controls. For example, an <input type="date" /> displays a calendar control when the user engages with the input box. Similarly, <input type="color" /> shows a color picker.

The HTML5 form input types are:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Sample HTML5 Form

The form below displays several of these inputs with the code for each shown at the right.

NOTE: Most browsers are still playing catch-up regarding support for the new input types. Opera is ahead of the game at the moment, so please view this page in Opera 10.5+. Having said that, even Opera won't render all of the types below as intended. Browsers typically display a normal text input if they don't support the specified HTML5 input type.

<input type="color" name="paint" />
<input type="date" name="eventdate" min="2010-04-26" />
<input type="datetime" name="eventdate2" />
<input type="datetime-local" name="eventdate3" />
<input type="month" name="eventmonth" />
<input type="number" name="quantity" min="10" max="25" />
<input type="range" name="pick" min="100" max="500" step="10" />
<input type="search" name="sitesearch" placeholder="bubblegum" />
<input type="tel" name="phone" />
<input type="time" name="eventtime" />

Last Updated: June 27, 2010