The <datalist>
tag creates a list of data items.
This list is used by a textbox which displays the data items in a dropdown.
This input field is associated with a <datalist>
.
Click the input field to see the items in a dropdown.
<datalist id="programming">
<option value="HTML">
<option value="Css">
<option value="Bootstrap">
<option value="C#">
</datalist>
<form action="/tutorial/action.html">
<input type="text" list="programming" name="code">
<input type="submit">
</form>
A <datalist>
creates a set of pre-defined data values.
This list is used by <input> controls (textboxes) as recommended values.
The recommended values appear in a dropdown, just like the browser's autocomplete feature.
To bind (associate) a datalist to a textbox, use the list attribute.
Note: Unlike dropdowns (<select> elements), users will still be able to enter free-text values.
<datalist>
- defines a data list element
The <datalist>
element has no attributes, but it does accept global attributes.
Of these, the id is always used; in fact, it is required.
Attribute | Value | Description |
---|---|---|
id | value | Provides the datalist element with a unique identifier. |
For additional global attributes see our global attributes list.
Both <select> and <datalist>
allow users
to select from a list of options.
What is the difference? This table compares the two.
SELECT | DATALIST |
---|---|
A dropdown value (option ) must be selected. |
Dropdown values are just suggestions. Users are free to enter their own value. |
The option element may have different label and values (name/value pairs). |
The option element has the same label and value. |
The onchange event is fired immediately when the value changed. |
The onchange event is fired once the element loses focus or the enter key is pressed. |
Summary: With a select element the dropdown options are the only acceptable values. With datalists, the options are suggested values only -- you can still enter any other value. Note that in the real-world solutions, datalists are rarely used.
The <datalist>
tag is part of a group of tags
that are used to create data entry forms.
This group is referred to as the Form tag group.
Together, they allow you to create comprehensive data input solutions.
Here is a list of form tags
Element | Description |
---|---|
<form> | Defines a data entry area that contains input elements |
<input> | Creates an input field in which data can be entered |
<label> | Creates a label or brief description before input elements |
<textarea> | Creates a multi-line text input control |
<select> | Creates a dropdown control |
<button> | Creates a clickable button that can contain text or an image |
<datalist> | Specifies a list of options for a textfield (<input>) element |
<fieldset> | Groups related form elements and displays a box with a legend around these |
<legend> | Defines a caption for a fieldset |
Here is when <datalist>
support started for each browser:
Chrome
|
20.0 | Jun 2012 |
Firefox
|
4.0 | Mar 2011 |
IE/Edge
|
10.0 | Sep 2012 |
Opera
|
12.1 | Nov 2012 |
Safari
|
12.1 | Mar 2019 |