HTML datalist Tag

Example

An <input> element with pre-defined values in a <datalist>:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <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 on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element's list attribute to bind it together with a <datalist> element.

---

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

---

Differences Between HTML 4.01 and HTML5

The <datalist> tag is new in HTML5.

---

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;}