HTML <datalist> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

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

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>

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes