DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <datalist> Data List Tag

#learnhtml #htmld

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.

Top comments (0)