list

The HTML list attribute links an <input> element to a <datalist>, enabling autocomplete suggestions from a predefined list for user input.

list attribute

The list attribute in HTML connects an <input> element to a <datalist> element, enabling users to select from a predefined set of suggestions as they type. It improves form usability by providing relevant options for fields with common or limited values, such as names, categories, or locations.

Syntax

index.html
<input list="datalist-id">

Example

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

index.html
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Definition and Usage

The list attribute links an <input> element to a <datalist> element, which provides predefined options.

Values

Applies To

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

Conclusion

The list attribute in HTML links an <input> element to a <datalist>, allowing users to access predefined suggestions. It improves the user experience by offering quick options for fields with common or restricted values. This functionality helps simplify form filling and minimize mistakes.