HTML <datalist> tag

The <datalist> tag defines a list of autocompletion values for an <input> element. It will be displayed in dropdown list; users can also type their own value. It is always associated with id attribute.

Type: Inline Element

Syntax of <datalist> tag

<input list="any-id">
<datalist id="any-id">
  <option value="Option 1">
  <option value="Option 2">
</datalist>

The <datalist> tag is introduced in HTML 5.

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<datalist>	20.0 or higher	10.0 or higher	4.0 or higher	No	9.0 or higher

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <label for="color"> Choose a colour: </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>

Run The code »

Output on the browser

Choose a colour:

More reference

The <datalist> tag specifies a list of predefined values for an <input> element, showing a dropdown of suggestions when the user types. The value of the list attribute on <input> must be the same as the id of the <datalist> This value connects <input> with <datalist>.

Default CSS properties of <datalist> tag

<style>
  datalist { display:none; }
</style>

❮ Previous Next ❯