datalist element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The 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.
While the 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.
Ejemplos
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 option
element.
<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>
Image format:
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 pattern
, min
, max
, step
, etc.
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>
Compund weight:
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 datalist
element.
<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>
Attributes
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.