HTML <datalist> Data List Tag
Tags: learnhtml, htmld
Published: 2021-02-25 08:14:01

---
title: HTML <datalist> Data List Tag
published: true
date: 2021-02-17 12:12:57 UTC
tags: LearnHTML,HTMLD
canonical_url: https://sharepointanchor.com/learn-html/html-datalist-data-list-tag/
---

In [HTML](https://sharepointanchor.com/learn-html/ "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](https://sharepointanchor.com/learn-html/ "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 **<input>** element that contains a **“list”** attribute. Predefined options for input are enclosed in a nested **<option>** element.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>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>

```

### 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 <option> tags.</option> |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any [HTML](https://sharepointanchor.com/learn-html/ "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](https://sharepointanchor.com/learn-html/ "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>

```

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

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-20.png)<figcaption>Result</figcaption>

### Download Sample File:

[Data-List-Tag-in-HTML](https://sharepointanchor.com/wp-content/uploads/2021/02/Data-List-Tag-in-HTML.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/Data-List-Tag-in-HTML.html)

## Attributes:

The [HTML](https://sharepointanchor.com/learn-html/ "HTML") Data list tag supports both **Global Attributes** and **Event Attributes**.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Broswser-support.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[HTML <center> Center Tag](https://sharepointanchor.com/learn-html/html-center-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**

The post [HTML <code>datalist</code> Data List Tag](https://sharepointanchor.com/learn-html/html-datalist-data-list-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).