Cloud Cloud Cloud Cloud

The list Attribute

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





 

Input type
Firefox
4+

Safari
7-

Safari
7-

Chrome
20+

Opera
9+

IE
10+

Android
4.3-
Text, url, etc.
type="range"
type="color"

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.
Cloud Cloud Cloud Cloud

Let Wufoo do the hard work.

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