Coastal Media Brand

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









AttributeDescription
idSpecifies a unique id for the element.
classSpecifies a class name for the element.
nameSpecifies the name of the list of options.
valueSpecifies the value of an option
labelSpecifies 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

Web Design Myrtle Beach

Coastal Media Brand

© 2024 Coastal Media Brand. All rights Reserved.