The `datalist` tag is used to provide an auto-complete option for users through a dropdown menu. It is used together with the `input` tag in forms.

The `datalist` tag has a single attribute: an `id`. 

> The `id` attribute of `datalist` must match the `list` attribute of the `input` tag. This ensures that the dropdown menu is related to the input field. 

The illustration below shows how the`datalist` tag can be used in HTML:

# Syntax 

The syntax of `datalist` tag is as follows:

```HTML
<datalist id="some-id">
    <option value="A">
    <option value="B">
    <option value="C">
</datalist>
```

We begin by opening the tags using the `<>` symbol. In between the symbol, we write `datalist`. We then close the tags using `</>`. Once again, we will place the name of our tag in-between `<>` and after the `/` symbol.

The `id` acts as an identifier of the `datalist` tag. Each option inside the dropdown menu comes inside the `option` tag. The `option` tag is also enclosed within the `<>` symbol. Finally, each `option` has a `value` attribute that holds each value inside the dropdown menu.

# Example

The code snippet below shows how the `datalist` tag can be used in `HTML`:

> Names of all countries have not been added to the list.

<html>
<head>
</head>
  
  <label>Choose a country:</label>
  <input list="country" />
  
  <datalist id="country">
    <option value="America">
    <option value="Afghanistan">
    <option value="Albania">
    <option value="Algeria">
    <option value="Argentina">
    <option value="Australia">
    <option value="Bahrain">
    <option value="Bangladesh">
    <option value="Belgium">
    <option value="Brazil">
    <option value="Canada">
    <option value="Chile">
    <option value="China">
    <option value="Denmark">
    <option value="Egypt">
    <option value="Finland">
    <option value="France">
    <option value="Germany">
    <option value="Greece">
    <option value="Hungary">
    <option value="Iceland">
    <option value="Iran">
    <option value="Iraq">
    <option value="Italy">
    <option value="Japan">
    <option value="Kenya">
    <option value="Kuwait">
    <option value="Lebanon">
    <option value="Libya">
    <option value="Malaysia">
    <option value="Mexico">
    <option value="Netherlands">
    <option value="Norway">
    <option value="Oman">
    <option value="Pakistan">
    <option value="Palestine">
    <option value="Portugal">
    <option value="Qatar">
    <option value="Russia">
    <option value="Singapore">
    <option value="Spain">
    <option value="Sweden">
    <option value="Switzerland">
    <option value="Turkey">
    <option value="United Kingdom">
    <option value="United States of America">
    <option value="Vietnam">
    <option value="Yemen">
  </datalist>

</body>
</html>

codemirror

# Explanation

* The `label` tag places a label next to the input field.
* The `input` tag creates a textbox for user input. 
* The `datalist` tag can have as many `option` tags as possible. Each `option` tag has a `value` that stores a country name. 
* Notice that the `id` attribute of the `datalist` tag is the same as the `list` attribute of the `input` tag.
* When a letter is entered inside the textbox, a dropdown menu appears holding country names for auto-fill.


What is the datalist tag in HTML?

The datalist tag provides autocomplete options in HTML forms, linking input tags via matched id and list attributes.