datalist element represents a list of predefined options that can be used to supply suggestions in many
form controls. These options can be provided by the browser in a list or as an autocompletion referece, depending on the browser and the control this element is attached to. A
datalist is never rendered on its own.
datalist element acts as a container, the suggestions are defined with the
option element. The content of this element will be shown as a suggestion when the browser considers it properly (like for example, when the user starts writing in a text box).
To improve compatibility, a
datalist can contain the options inside a
select control, to provide better user experience in non-supporting browsers.
This first example shows a basic usage of the
datalist element. Here, a text control is linked to the
datalist to provide a set of suggestions for the control. This linking is achieved by matching the attribute
id in the
datalist with the attribute
list in the control. Options are provided with the
<p>Image format: <input type="text" name="imageformat" list="imageformatslist"></p> <datalist id="imageformatslist"> <option>PNG</option> <option>JPEG</option> <option>GIF</option> <option>TGA</option> </datalist>
Authors must be aware that the values supplied by the items in a
datalist may not comply with the requirements of the associated control. In such cases, browsers will simply ingore all non-compliant elements in the list. To prevent a situation like this from happening, authors should check carefully the values provided in the
datalist element in relation with the associated control and the attributes of it that narrow the range of accepted values, like
In the following example, we'll provide a set of non-conforming suggestions to a number field that will be excluded for not being compliant with: the element itself (the value isn't a number), the
min attribute (the value is lower than the limit) and the
step attribute (the value has more decimals than the allowed).
<p>Compund weight: <input type="number" name="compoundweight" min="2" step="0.01" list="weightslist"></p> <datalist id="weightslist"> <option>Very heavy</option> <option>0.57</option> <option>0.0215</option> <option>4.62</option> </datalist>
Lastly, we'll provide
datalist options inside a
select control, as a way to improve user experience in non-suporting browsers. Note that supporting browsers, in contrast to non-supporting ones, won't display the contents of the
<p><label>Enter a name for your pet: <input type="text" name="petname" list="petnames"></label></p> <datalist id="petnames"> <label>Or select one from the following list</label> <select name="petname"> <option>Rocky</option> <option>Stripes</option> <option>Watson</option> <option>Lucky</option> </select> </label> </datalist>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.