HTML <datalist> Tag

The <datalist> tag is one of the HTML5 elements. It is used to create a list of input options, predefined by the <input> tag. Initially, the options are hidden, and the list of them 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.

Syntax

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

Example of the HTML <datalist> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <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">
    </datalist>
  </body>
</html>

Result


Choose browser

Attributes

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

Browser support

chrome firefox safari opera
20+ 4+ 9+

Practice Your Knowledge

What is the usage of the HTML <datalist> tag?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?