HTML datalist Tag

HTML <datalist> tag is used to display the list of predefined options as suggestions that are displayed to the user, when the user is inputting some value in an input field. This tag enables the autocomplete feature on the forms; which means when a user starts typing in a textbox, a list of predefined words is dropped down to choose from.

• We use the <datalist> tag along with the <input> tag. To attach a datalist element with an input element, we need to provide an id value to the datalist tag and provide the same value to the list attribute of the input tag.

• The <option> tag(HTML option tag) is used as a child of the <datalist> tag, used to specify the list of options to be displayed.

HTML <datalist> Tag - Syntax and Usage

The <datalist> tag requires the start(opening) tag and end(closing) tag.

Following is the syntax for using the datalist tag in your HTML code:

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

We can use as many option tags inside the datalist tag as we want.

HTML <datalist> Tag Basic Example

In the code example below, we have an input field for the user to enter their favourite car brand, and we have used the <datalist> tag to provide some default suggestions to the user.

One important point to note here is that, <datalist> tag is used to provide some pre-defined options which acts like autocomplete suggestions, and the user can enter a value which is not in the datalist options too. Hence, in no way, this is like a Select dropdown list.

HTML <datalist> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

Default CSS style for HTML <datalist> tag

datalist {
    display: none;
}

Browser Support for HTML <datalist> tag

Following browsers support this attribute:

• Firefox 2+

• Google Chrome 4+

• Internet Explorer 9+

• Apple Safari 3.1+

• Opera 9+