The <datalist> element contains a set of <option> elements representing predefined options for other input elements. You can use it with the <input> element, whose list attribute references the <datalist> element.
It’s a great way of giving users options for form data entry, whilst giving them the alternative of free text entry, unlike the more restrictive <select> element.
Syntax
1 |
<datalist>
|
2 |
<option value="option1"> |
3 |
<option value="option2"> |
4 |
<option value="option3"> |
5 |
</datalist>
|
Example
Here’s an example using fruits as options for a form input. Note the <input> element’s list attribute which references the datalist:
Syntax
1 |
<label for="fruits">Choose a fruit:</label> |
2 |
<input list="fruit-options" name="fruits" id="fruits-input" placeholder="Fruit options"> |
3 |
|
4 |
<datalist id="fruit-options"> |
5 |
<option value="Apple"> |
6 |
<option value="Banana"> |
7 |
<option value="Cherry"> |
8 |
<option value="Durian"> |
9 |
<option value="Elderberry"> |
10 |
<option value="Fig"> |
11 |
<option value="Grape"> |
12 |
<option value="Honeydew"> |
13 |
</datalist>
|
Result
Users can enter any text they like, click on a suggested option from the datalist, or enjoy the fruits of autocomplete:
Attributes
| Attribute | Description |
id |
Specifies a unique id for the element. |
class |
Specifies a class name for the element. |
name |
Specifies the name of the list of options. |
value |
Specifies the value of an option |
label |
Specifies a label for an option |
Content
The <datalist> element contains only <option> elements which represent a single item within the “list”.
Did You Know?
- The
<datalist>element was introduced in HTML5 to provide autocomplete options for text inputs. - Multiple input elements on the same page can use the
<option>elements inside a single<datalist>element. - When a user types in an
<input>element with a list attribute that references a<datalist>element, the browser will show a dropdown list of options from the<datalist>element that matches the text entered so far.
Learn More
- To learn more about the
<datalist>element, you can check out the official HTML specification.
HTML Elements
By
