DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <datalist> Data List Tag

In HTML, the datalist Data List tag used to provide an auto-complete feature on the form element. This tag generates a drop-down list with predefined options for users to select. The datalist tag is one of the new sectioning element in HTML 5.

By default, the options are hidden , and the list of them becomes available when the user starts typing. For Example, when you do a search from your search engine it will suggest the related terms. It is helpful to save time and reduces errors.

The datalist tag is used with an element that contains a “list” attribute. Predefined options for input are enclosed in a nested element.

Estimated reading time: 2 minutes

Syntax:

This tag contains both the starting datalist tag and ending datalist tag. The content is written between these two tags.


<datalist>... </datalist>

Enter fullscreen mode Exit fullscreen mode

HTML datalist Tag:

| HTML datalist tag | Defines a list of suggested valuer for an input element |
| Content categories | Flow content, phrasing content, palpable content. |
| Permitted content | Either Phrasing content or zero or more tags. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts phrasing content. |
| Implicit ARIA role | listbox |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLDataListElement |

Sample of the HTML datalist tag:

Here is the example for HTML Data List tag.


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <div>Select your browser:</div>
    <input list="Browsers" />
    <datalist id="Browsers">
      <option value="Google Chrome">
      <option value="Safari">
      <option value="Firefox">
      <option value="Opera">
      <option value="Maxthon">
    </datalist>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Note : The datalist tag’s “id” attribute must be equal to the element’s “list” attribute.

Result:

Result

Download Sample File:

Data-List-Tag-in-HTMLDownload

Attributes:

The HTML Data list tag supports both Global Attributes and Event Attributes.

Browser Support:

Browser Support

Related Articles:

The post HTML datalist Data List Tag appeared first on Share Point Anchor.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up