Cloud Cloud Cloud Cloud

The datalist Element

The Current State of HTML5 Forms

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 input with a list attribute matching the id of your <datalist> element comes into focus, is double clicked or upon data entry, a menu will appear populated by the optionprovided 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.
Cloud Cloud Cloud Cloud

Let Wufoo do the hard work.

Sign up for a free account and start making forms the easy way.