Let Wufoo do the hard work. Sign up for a free account and start making forms the easy way.
Live Demo
 Firefox 4+ |  Safari 8- |  Safari 8- |  Chrome 20+ |  Opera 9+ |  IE 10+ |  Android 4.4.3+ |
|---|---|---|---|---|---|---|
 |  | | | | | |
The Low Down
The <datalist> element lets you provide <option>s that are available for selection by another form control.
- When an
inputwith alistattribute matching the id of your<datalist>element comes into focus, is double clicked or upon data entry, a menu will appear populated by theoptionprovided in the<datalist>. - While not officially required, you must include an id for the inputs to reference. One
<datalist>can be referenced by an unlimited number of input elements. - A datalist must contain zero or more
<option>elements. No other children are valid. - 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. - If a browser doesn’t support
<datalist>, it will not show the nested<options>. Generally<options>only display when nested within a<select>. Now, they also display, though differently, when nested in a<datalist>in supporting browsers. - 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 input types, supporting browsers show a drop down
<option>in the associated<datalist>. - 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,
<datalist>is supported in conjunction with 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. It is 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.
