<datalist></datalist> tag HTML

Example

A simple <datalist> tag:

<form>
	<datalist id="browsers">
</form>

Laboratory

description & Usage

The <datalist> tag is used to create a predefined list of <input> tags.

<datalist> use the autocomplete feature. The created list is displayed as a drop down.

To specify list values, the <option> tag is used with the value attribute.

<option value="first value">

To connect <datalist> to <input> you must:

In the <datalist> tag, we add the id attribute and give it a name.
In the <input> tag, we add the list attribute and enter the desired list name in it.

<input list="ages" name="age">

<datalist id="ages">
     <option value="7-12">
     <option value="12-18">
     <option value="18-30">
     <option value="30-40">
     <option value="+40">
</datalist>

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<datalist>

Global Attributes

The <datalist> tag supports the HTML Global Attributes.

Event Attributes

The <datalist> tag supports the HTML Event Attributes.

Default CSS

Most browsers will display the <datalist> tag with the following default style:

datalist {
	display: none;
}