HTML <datalist> Tag

The <datalist> tag in HTML is used to provide a list of predefined options for an input field. When a user starts typing in an input field associated with a <datalist>, a dropdown menu appears, displaying matching options from the list. This improves the user experience by offering suggestions and helping avoid errors. It works in conjunction with the <input> tag.

Syntax

<input list="datalist-id">
<datalist id="datalist-id">
  <option value="option1">Option 1 Text</option>
  <option value="option2">Option 2 Text</option>
  ...
</datalist>

Attributes

Example

<label for="browser-input">Choose your favorite browser:</label>
<input list="browsers" id="browser-input" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

More Examples

Example 1: Basic Usage

This demonstrates the core functionality of <datalist> with a simple list of colors.

<label for="color-input">Select a Color:</label>
<input list="colors" id="color-input" name="color">

<datalist id="colors">
  <option value="Red"></option>
  <option value="Green"></option>
  <option value="Blue"></option>
  <option value="Yellow"></option>
  <option value="Purple"></option>
</datalist>

Example 2: Adding Text Labels to Option Values

The value attribute specifies what will actually be submitted by the form, but you can display text different from the value as well by adding a text content within <option> tag. This is useful if your value to submit is an id and the display value will be the name of that id.

<label for="city-input">Select a City:</label>
<input list="cities" id="city-input" name="city">

<datalist id="cities">
  <option value="nyc">New York City</option>
  <option value="la">Los Angeles</option>
  <option value="chicago">Chicago</option>
  <option value="london">London</option>
  <option value="paris">Paris</option>
</datalist>

Example 3: With Text Input Field

When combined with the text type, the options narrow as the user types in the input field

<label for="country-input">Select a Country:</label>
<input list="countries" id="country-input" name="country" type="text">

<datalist id="countries">
  <option value="United States">
  <option value="United Kingdom">
  <option value="Canada">
    <option value="Australia">
  <option value="Germany">
    <option value="France">
  <option value="India">
    <option value="China">
</datalist>

Example 4: Combining with other input types such as number

While commonly used with text inputs, datalists can also work with number types, providing predefined options for numeric inputs such as ages, years, etc.

 <label for="age-input">Enter Age:</label>
 <input list="ageList" id="age-input" name="age" type="number">

  <datalist id="ageList">
    <option value="18">
    <option value="21">
    <option value="30">
    <option value="40">
    <option value="50">
    <option value="60">
  </datalist>

Browser Support

The <datalist> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• The id attribute of the <datalist> element must match the list attribute of the <input> element for the association to work.
• The options displayed by the <datalist> are based on the user's input. As they type, the list dynamically filters the suggestions.
• The <option> tag within the <datalist> can contain just the value, or a text value different from the actual option value.
• If the browser does not support the datalist tag it will treat the input as a normal text input with no autocomplete suggestions.
• <datalist> can be used with any input type, not just text. It can be useful for numeric, email, and other input types as well.
• For users using assistive technologies, the <datalist> works just like a dropdown which can be selected using arrow keys and enter key.

By using the <datalist> tag, you can enhance the usability of your forms by providing predefined options and improving data entry.