HTML datalist tag

HTML <datalist> tag

Use of <datalist> tag

The <datalist> tag defines a list of predefined option values of an <input> element. It is not self independent element. It requires option lists to define. In Google Search Engine, when you type a word like seo, you will see suggestions of your keywords like seo tools, seo techniques etc. in the dropdown list.
Alternately, it is used to provide an autocomplete values on <input> element. Users could be able to see drop-down lists of related keywords which when type the specific keywords might be letters, words, numeral value etc.
You must define <datalist> tag within the <input> element. The value of the list attribute of the <input> tag must be same with the id attribute of the <datalist> tag.

Default CSS properties of <datalist> tag

datalist {
display: none;
}

Example of <datalist> tag

<input list="colors" name="color">
    <datalist id="colors">
       <option value="red">
       <option value="green">
       <option value="blue">
       <option value="pink">
       <option value="black">
       <option value="white">
    </datalist>

Supported Browsers

The following versions are the minimum versions that support the <datalist> tag fully.

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<datalist> 20.0 10.0 4.0 not supported 9.0

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label for="color"> Choose Your favorite color <label>
<input list="colors" name="color">
    <datalist id="colors">
       <option value="red">
       <option value="green">
       <option value="blue">
       <option value="pink">
       <option value="black">
       <option value="white">
    </datalist>
</body>
</html>

Output