HTML datalist Tag

HTML datalist Tag is used to define pre-defined options or values for the input HTML Tag. HTML datalist Tag provides the autocomplete feature for user.

Table of Contents

Syntax of HTML datalist Tag

The Syntax of HTML datalist Tag is shown below, It has both starting and ending tags.


<datalist id="languages">
</datalist>

Usage of HTML datalist Tag

HTML datalist Tag specifies the pre-defined values or options for the input HTML element. These values help the user to autocomplete the input type elements. Datalist tag values also act as hints for the user.

To use the HTML datalist Tag the value of id attribute of datalist tag must be equal to the list attribute value of input tag.

Example of HTML datalist Tag

Simple example of HTML datalist Tag is shown below.


<p>Choose your language from the list:</p>
<input list="languages">
<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="JQuery">
  <option value="PHP">
</datalist>

Output

The output of above HTML code is shown below.

Choose your language from the list:

Browser Support for HTML datalist Tag

HTML datalist Tag is supported by all major browsers except Safari 12.0 or earlier.

Global Attributes Support in HTML datalist Tag

The HTML datalist Tag supports all Global Attributes.

Event Attributes Support in HTML datalist Tag

The HTML datalist Tag supports all Event Attributes.