This is an important message requiring you to make a choice if you're based in the EU.

HTML <datalist> Tag

The <datalist> tag is used to create a list of input options, predefined by the <input> tag. Initially, the options are hidden, the list of options becomes available when the user starts typing. The list attribute of the <input> tag must match the id of the <datalist> element.

Predefined options for input are enclosed in a nested <option> element.


The <datalist> comes in pairs; the content is placed between the opening (<datalist>) and the closing (</datalist>) tags.


<!DOCTYPE html>
    <title>Title of the document</title>
    <div>Choose browser</div>
    <input list="browsers" />
    <datalist id="browsers">
      <option value="Opera">
      <option value="Safari">
      <option value="Firefox">
      <option value="Google Chrome">
      <option value="Maxthon">


Choose browser


The <datalist> tag supports Global Attributes and the Event Attributes.

Browser support

20+ 4+ 9+

Do you find this helpful?

Related articles