HTML list Attribute

Description

The HTML list attribute is associated with the <input> element and is used to bind the input field to a <datalist> element. This association enables the creation of a predefined list of suggested values for the input field, enhancing user experience by providing an autocomplete feature. When users start typing in the input field, the browser displays a dropdown list of options that match the users' input, allowing them to select a suggested value instead of typing the entire value themselves. This is particularly useful for fields that have a limited set of possible values, such as country names, product names, or other categories.

The list attribute's value must be the same as the id attribute of the <datalist> element it is associated with. The <datalist> element contains a number of <option> elements, each representing a suggested value for the input field.

Here's a simple example of how to use the list attribute:

<input type="text" id="ice-cream-choice" name="ice-cream-choice" list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
  <option value="Chocolate">
  <option value="Coconut">
  <option value="Mint">
  <option value="Strawberry">
  <option value="Vanilla">
</datalist>

In this example, when the user starts typing in the input field, they will see a dropdown list of ice cream flavors to choose from. This not only speeds up the form filling process but also helps prevent typing errors and ensures the consistency of the input data.

Syntax

<input list="datalist-id">

Values

• datalist-idThe id of the <datalist> element.

Applies To

The list attribute can be used on the following html elements.

• <input>

Example

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Chrome">

  <option value="Firefox">

  <option value="Safari">

  <option value="Edge">

</datalist>

Browser Support

The following table will show you the current browser support for the HTML list Attribute.

Desktop
12	20	4	12.1	12.1

Tablets / Mobile
25	4	12.1	12.2	1.5	4.4.3

Last updated by CSSPortal on: 28th March 2024