HTML <Datalist> Tag

Definition

The <datalist> tag specifies a list of options for an <input> element in the form of a drop-down box.

Example

<label for="favorite-book">What is your favorite Lord of the Rings book?
<input list="book-list" id="favorite-book" name="favorite-book" />
<datalist id="book-list">
    <option value="The Fellowship of the Ring">
    <option value="The Two Towers">
    <option value="The Return of the King">
</datalist>
</label>

Usage

• The <datalist> element’s id attribute must be the same as the <input> elements list attribute. This creates a relationship between the two.
• The datalist element may contain phrasing content elements, such as <b>, <br>, <canvas>, <select> (to name just a few), or <option> elements.
• The closing tag is required.

Attributes

The Datalist element only supports the Global Attributes.

Best Practices

• You can set an <option> list as a failsafe in case the user’s browser does not support the <datalist> element:

  <label for="favorite-book">What is your favorite Lord of the Rings book?
  <input list="book-list" id="favorite-book" name="favorite-book" />
  </label>
  <datalist id="book-list">
  <label>
    <select name=book-list>
      <option value=""> 
      <option value="The Fellowship of the Ring">
      <option value="The Two Towers">
      <option value="The Return of the King">
    </select>
  <label>
  </datalist>

  Try it Yourself

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile