The Current State of HTML5 Forms

The list Attribute

<input type="text" list="numbers" />
<input type="range" min="0" max="100" list="numbers" />
<input type="number" min="0" max="100" list="numbers" />
<datalist id="numbers">
  <option>10</option> 
  <option label="30">30</option> 
  <option label="midpoint">50</option> 
  <option>70</option>
  <option>90</option> 
</datalist>

Live Demo

Input type
Firefox
4+
Safari
7-
Safari Mobile
7-
Chrome
20+
Opera
9+
IE
10+
Android
4.3-
Text, url, etc. Supported No support No support Supported Supported Supported No support
type="range" No support No support No support Supported Supported Supported No support
type="color" No support No support No support Supported Supported No support No support

Supported Browser Screenshots

Color with datalist range with datalist Time with datalist
Chrome 34

The Low Down

When an input with a list attribute matching a corresponding <datalist> element comes into focus, is double clicked or upon data entry, a dropdown menu appears populated by the option elements present as children of the <datalist>.

  • You might think of an <input> with a linked <datalist> like you would a group of radio buttons with an "Other: _________" choice or a select that also allows for free form data entry. For most input types, it behaves a bit like autocomplete or "suggested" items might. If you type "V" the list will show only items that start with "V" in Chrome, Opera and IE, and any <option> containing "V" in Firefox.
  • For <input type="range">, supporting browsers show tick marks along the slider at each value included as an <option> in the associated <datalist>.
  • For the date/time input types, supporting browsers show a drop down <option> in the associated <datalist>.
  • In the color input type, you can use the list attribe to link to a <datalist> showing preselected color <option>s.
  • Firefox doesn't show the data list drop down on focus, rather you have to double click on the input, otherwise it will show the suggestions upon data entry.
  • In mobile, this attribute is supported for most input types in Blackberry 10, Opera mobile thru v 12.1 (support was removed in 21), Chrome for Android and Firefox for Firefox OS. Not supported in IE10 mobile.
  • Fallback is just a regular text input. In non-supporting browsers, the <datalist> will not show unless you include a nested <select>, which is a way of falling back, as shown in progressive usage below as demonstrated by Jeremy Keith.