The list attribute on an <input> tag associates the input element with a <datalist>.
A datalist provides a list of suggested values to the input control.
A list attribute on an <input> element.
A datalist with colors is associated with the textbox. Click the textbox to see the color options.
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Yellow">
<option value="Purple">
<option value="Blue">
</datalist>
<form action="/tutorial/action.html">
Color <input list="colors" name="color"><br/>
<input type="submit">
</form>
The list attribute specifies the id of a <datalist> with suggested values.
Suggested values are only suggestions. The user can still enter any other value.
On the other hand, a dropdown control (<select>), does not allow custom values being entered.
<input list="datalist-id">
| Value | Description |
|---|---|
| datalist-id | The id of the <datalist> element. |
Here is when list support started for each browser:
 Chrome
|
20.0 | Jun 2012 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
9.6 | Oct 2008 |
 Safari
|
Not Supported |
Back to <input>
