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.

Did you enjoy this content?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.
I agree to have my personal information transfered to AWeber ( more information )