The list attribute

The list attribute specifies the id of a datalist element containing a set of suggested values that can be applied to an input element. Entering a value into the associated input element will filter the set of suggestions displayed from the associated datalist to those that begin with the entered text value.

Syntax:

<input type="text" name="color" list="colors" value="Orange" />

Elements:

<input />

If the input field can be freely typed within, the values from the datalist element specified by the list attribute are only treated as suggestions; the browser does not require that the final value of the input element match one of the items in the list.

Example

Example with the list attribute:

<!DOCTYPE html>
<html>

<body>
    
<h4>The <i>list attribute</i> example:</h4>

<form action="#" method="post">
  <label>Color: <input name="color" type="text" list="colors"></label>
  <datalist id="colors">
  <option value="red" label="Red">
  <option value="green" label="Green">
  <option value="blue" label="Blue">
  <option value="yellow" label="Yellow">
  <option value="magenta" label="Magenta">
</datalist>
</form>

</body>
</html>

›› go to examples ››

The list attribute

Syntax:

Elements:

Example

Example with the list attribute:

Comments

About

Contact

Get Connected