HTML <datalist> Tag

Definition and Usage

<datalist> The tag for <input> elementdefine a list of predefined options.

<datalist> The tag is used to <input> The element provides an "autocomplete" feature. When the user enters data, a dropdown list of predefined options will appear.

<datalist> The id attribute of the element must be equal to <input> of the element list attribute(This will bind them together).

See also:

HTML DOM Reference Manual:Datalist Object

Example

Data list with predefined options (connected to <input> element):

<label for="browser">Please select 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

Global Attributes

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

Event Attributes

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

Default CSS Settings

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

datalist {
  display: none;
}

Browser Support

The numbers in the table indicate the first browser version to fully support the element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
20.0 10.0 4.0 12.1 9.5