HTML <datalist> Tag

The <datalist> element is new in HTML5. It helps to create a list of predefined <option> elements for <input> element.

This tag provides an "autocomplete" characteristic on <input> element and users will see a drop-down list which is constituted with predefined options. For example, when you make a search on Google and write some letters, it brings a list of autocomplete options.

Syntax

The <datalist> element comes in pairs. The content must be written between opening (<datalist>) and closing (</datalist>) elements.

Use <input> element's "list" attribute to attach it with <datalist> element.

The <datalist> contains <option> element and it is not an independent control itself.

Note: This element is not supported by Safari browser.

Example

<!DOCTYPE html>
<html>
   <body>
      <div>Write a club name from Armenian Premier League:</div>
      <input list="teams" />
      <datalist id="teams">
         <option value="Alashkert">
         <option value="Ararat">
         <option value="Banants">
         <option value="Mika">
         <option value="Gandzasar">
         <option value="Pyunik">
         <option value="Shirak">
         <option value="Ulisses">
      </datalist>
   </body>
</html>

Result

Attributes:

The <datalist> tag also supports the Global Attributes.