Description

The HTML element <datalist> is used to specify a list of pre-defined options for an <input> element, which is displayed as a dropdown list on text input.

This is quite useful as it provides a list of quick choices for an input, which users can select while providing data to the input.

This looks like an autocomplete feature on an input element, which reduces time and spelling mistakes.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain <option> elements.
Tags Both opening and closing tags are required.
Versions HTML5

Syntax

Here is the basic syntax of the <datalist> element.

<datalist>
   <option value="some-value">
    ...
</datalist>

Examples

In the below example, the <datalist> elements are used to specify options for the input element.

  • The list attribute on <input> must be mapped to id attribute on <datalist> element
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Element - datalist</h1>
    <p>Enter your favorite sport name:</p>
    <input type="text" list="sports">
    <datalist id="sports">
        <option value="Football">
        <option value="Basket Ball">
        <option value="Cricket">
        <option value="Hockey">
    </datalist>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <datalist> tag.

Attribute Type Details
Element-Specific Attributes The tag <data> doesn't have any element-specific attributes.
Global Attributes Like all other HTML tags, the tag <datalist> supports the HTML Global Attributes.
Event Attributes The tag <datalist> also supports the HTML Event Attributes.

Browser Compatibility

The tag <datalist> is supported in all modern browsers.

  • Google Chrome 4+
  • Internet Explorer or Edge 9+
  • Firefox 2+
  • Apple Safari 3.1+
  • Opera 9+

Related Links