List of Suggestions at Form Text Field

The HTML5 datalist tag presents a list of possible values when a user starts typing in a text field. The user can select one of the values instead of typing the whole thing. Alternatively, the user can type something that isn't in the list.

No JavaScript required. No special CSS. Just HTML.

The datalist tag works only with the input type="text" field, not with the textarea field.

Different browsers list the possible values in the datalist tag differently.

Opera lists all values when the text field is empty and in focus. When the user starts to type in the field, only suggestions beginning with the characters being typed are listed.

The other browsers list values to select from only when the user begins to type something. Firefox lists values containing anywhere within them the sequence of characters being typed. Chrome list only values that begin with what is being typed.

For browsers that don't yet recognize the datalist tag, the text field acts like a normal text field without a list of suggestions.

Currently, Firefox, Chrome, and Opera recognize the datalist tag. When the other browsers upgrade to recognize it, they will work with the datalist tags already coded in your forms.

Here is a form with two examples.

And here is the source code for the above example.

<form onsubmit="return false">
<p>
Your favorite color? 
<input type="text" list="FavoriteColor" id="color" name="color" style="width:100px;">
<datalist id="FavoriteColor">
<option value="Red">
<option value="Green">
<option value="Silver">
<option value="Gold">
<option value="White">
<option value="Black">
<option value="Blue">
<option value="Purple">
<option value="Orange">
<option value="Yellow">
</datalist>
</p>
<p>
The current moon phase is: 
<input list="MoonTypes" id="moons" name="moon_phase" style="width:100px;">
<datalist id="MoonTypes">
<option value="New Moon">
<option value="Waxing Crescent Moon">
<option value="First Quarter Moon">
<option value="Waxing Gibbous Moon">
<option value="Full Moon">
<option value="Waning Gibbous Moon">
<option value="Last Quarter Moon">
<option value="Waning Crescent Moon">
<option value="Blue Moon">
</datalist>
</p>
</form>

Notice that the datalist tag immediately follows the text field it applies to.

The input type="text" tag has a list attribute. The list attribute's value is the id value of the corresponding datalist tag.

A form can have any number of datalist tags so long as each immediately follows the text field it applies to.

The HTML5 datalist tag to present a list of possible values for a text field can be used now. Browsers that recognize the tag will provided a selection list. The others will when they upgrade for it.

Will Bontrager