HTML <datalist> Tag
Example
A datalist with pre-defined options (connected to an <input> element):
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Try it Yourself »
Definition and Usage
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature
for <input>
elements. Users will see a drop-down list of pre-defined options as they input data.
The <datalist> element's id attribute
must be equal to the <input> element's list attribute (this binds them
together).
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <datalist> | 20.0 | 10.0 | 4.0 | 12.1 | 9.5 |
Global Attributes
The <datalist> tag also supports the Global Attributes in HTML.
Event Attributes
The <datalist> tag also supports the Event Attributes in HTML.
Related Pages
HTML DOM reference: Datalist Object
Default CSS Settings
Most browsers will display the <datalist> element with the following default values:
datalist {
display: none;
}
