Embedded Files
The <datalist> form element is useful for linking a list of choices to an input element.
We have already seen this element in action with different <input> elements, such as <input type="color">, <input type="date">, or <input type="range">.
It is often "linked" to input fields either for restricting the value set that can be proposed (i.e., restricted set of colors or possible dates, or for displaying slider ticks, as shown above), but it may also be used in a more general way, for providing client-side auto-completion without the need to use JavaScript.
It works with the new list attribute of input fields introduced by HTML5. The id of the <datalist> must match the value of the list attribute in the input field. A datalist can be shared by several input fields. It suffices that their list attribute matches the id of the datalist element.
The input field is related to the datalist that will propose auto-completion based on <datalist> values.
Typical use for auto-completion
Typical use for auto-completion
Here is an online example at JSBin, or try it here in your browser (type the name of your favorite browser):
Source code of this example:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" />
</form>
As you can see at lines 2 and 4, the id and list attributes match. The <datalist> element is wrapped around a set of <option> that are available for selection by another form control (in this example the input field from line 2).
Page updated
Google Sites
Report abuse