HTML <datalist> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <datalist> element in HTML represents a set of predefined options for an <input> element. It allows web developers to provide users with a list of suggested values while still allowing freeform input. Essentially, it enhances the user experience by offering autocomplete functionality without restricting the input strictly to a fixed list.

When an <input> element is linked to a <datalist> through the list attribute, the browser displays a dropdown of options from the <datalist> as the user types. Users can select one of these suggestions or continue typing a custom value, giving a balance between guidance and flexibility.

The <datalist> itself does not display anything on the page directly; it is a container for <option> elements, each of which represents a possible choice. This makes it particularly useful for inputs like search fields, forms with frequent repeated values, or any scenario where guiding user input is helpful without limiting it.

For example, it can be used to suggest countries, cities, colors, or commonly entered text. Unlike traditional <select> elements, <datalist> allows users to type freely rather than forcing them to choose only from the predefined list.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: <option> elements
Start/End Tags: Start tag: required, End tag: required

Example

HTML

Enter an Australian State:<br>

<input list="browsers">

<datalist id="browsers">

  <option value="South Australia">

  <option value="Western Australia">

  <option value="Victoria">

  <option value="New South Wales">

  <option value="Queensland">

  <option value="Tasmania">

</datalist>

Result

Editor

Attributes

None

Global Attributes

The <datalist> tag also supports the Global Attributes in HTML5

Event Attributes

The <datalist> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <datalist> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.