HTML / HTML Tags

HTML <Datalist> Tag

Oct 12, 2022
2 min read
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

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