Let Wufoo do the hard work. Sign up for a free account and start making forms the easy way.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input type="text" list="datalist"> | |
| <datalist id="datalist"> | |
| <option>First Choice</option> | |
| <option>Second Choice</option> | |
| <option>Third Choice</option> | |
| </datalist> | |
Live Demo
 |  | | | | | |
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.
