HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <datalist> Tag

The <datalist> tag is used to provide a list of predefined options for an <input> element.
It allows users to type a value or select from a list, offering a flexible and user-friendly input experience.

The <datalist> element must be linked to an <input> using the list attribute.

Syntax

html

<input list="listId" name="inputName" id="inputId">
<datalist id="listId">
  <option value="Option 1">
  <option value="Option 2">
</datalist>

Attributes

AttributeDescription
idUnique identifier for the datalist, used by the list attribute of <input>.
nameRarely used, specifies the name of the datalist.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Datalist Example</title>
</head>
<body>
  <h2>Choose Your Favorite Browser</h2>
  <form action="/samples/form_processor.php" method="post">
    <label for="browser">Browser:</label>
    <input list="browsers" id="browser" name="browser" placeholder="Start typing..." required>
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Edge">
      <option value="Safari">
      <option value="Opera">
      <option value="Internet Explorer">
    </datalist><br><br>

    <input type="submit" value="Submit">
  </form>
</body>
</html>

Output

Browser Output

html

You will see a text input where users can either type or select a value from a suggested dropdown list.
As the user types, matching options appear for selection.
Try it in our TryIt Editor to see how <datalist> enhances form input.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browser supports <datalist> tag

Notes

  • The <datalist> provides autocomplete suggestions but does not restrict input to only the listed options.
  • Must be linked to an <input> element via the list attribute.
  • Improves user experience for forms with common or repetitive inputs.
  • Works best for short lists; for very long lists, consider <select> instead.

Conclusion

The <datalist> tag creates a dynamic, user-friendly input experience.
It is widely supported and enhances form usability by providing autocomplete suggestions.

PreviousHTML <legend> TagNextHTML <output> Tag