Language References

---

Assigns a set of pre-defined options for an <input> element.

HTML 5

HTML Syntax

<datalist
   class = classname
   id = value
   style = css properties
   title = text
   event = script
>

The DATALIST element is used to provide a set of OPTION elements that represent predefined choices for an INPUT field.

In its simplest form, the <datalist> element can contain one or more <option> elements, which will be the selectable choices for the <input> control.

The <datalist> element is hooked up to an <input> element using the list attribute on the <input> element.

The <datalist> element’s id attribute must be set to the <input> element’s list attribute value, to bind the elements together.

The <datalist> element has no attribute of its own, but supports global attributes common to all HTML elements.

Both start and end tags are required.

DATALIST and SELECT elements are both used for choosing an option from a given list.

The main difference is that in the <datalist> tag, as a user starts to type in the <input> field, the list of matching options appear. The user can then choose from the options in the list, and can even add more text after selecting an option.

The <select> tag does not provide this feature.

<label>Happiness for me is: 
<input name=wants list=wants>
<datalist id=wants>
   <option value="a happy family">
   <option value="a stable job">
   <option value="a healthy mind and body">
   <option value="traveling the world">
   <option value="peace and prosperity">
</datalist>
</label>

<input type="submit">

which would render on a web page as follows: