List and the Datalist element-HTML5 Form Enhancement: Input Types and Attributes

List and the Datalist element-HTML5 Form Enhancement: Input Types and Attributes

List and the Datalist element-HTML5 Form Enhancement: Input Types and Attributes

List and the datalist element

The list attribute enables the user to associate a list of options with
a particular field. The value of the list attribute must be the same as
the id of a <datalist> element (new in HTML5) that resides in the same document.

The <datalist> element is new in HTML5 and represents a predefined
list of options for form controls. It works in a similar way to the
in-browser search boxes that autocomplete as you type. By adding a
<select> element inside the <datalist> you can provide
superior graceful degradation than by simply using an <option>
element. Remember, however, to declare the display of your <datalist>
as inline-block within your CSS to fix a bug in WebKit.

<label for=”fruit”>Your favourite fruit:</label>
<datalist id=”fruits”>
<select name=”fruit”>
<option value=”Blackberry”>Blackberry</option>
<option value=”Blackcurrant”>Blackcurrant</option>
<option value=”Blueberry”>Blueberry</option>
</select>
If other, please specify:
</datalist>
<input type=”text” name=”fruit” id=”fruit” list=”fruits”>

This article originally appeared in issue 213 of .net magazine – the world’s
best-selling magazine for web designers and developers.