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>

Choose your browser from the list:

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).

Global Attributes

The <datalist> tag also supports the Global Attributes in HTML.

Event Attributes

The <datalist> tag also supports the Event Attributes in HTML.

Default CSS Settings

Most browsers will display the <datalist> element with the following default values:

datalist {
display: none;
}