HTML <datalist> Tag

The <datalist> tag creates a list of data items.

This list is used by a textbox which displays the data items in a dropdown.



This input field is associated with a <datalist>.
Click the input field to see the items in a dropdown.

<datalist id="programming">
  <option value="HTML">
  <option value="Css">
  <option value="Bootstrap">
  <option value="C#">

<form action="/tutorial/action.html">
  <input type="text" list="programming" name="code">
  <input type="submit">

Using <datalist>

A <datalist> creates a set of pre-defined data values.

This list is used by <input> controls (textboxes) as recommended values.

The recommended values appear in a dropdown, just like the browser's autocomplete feature.

To bind (associate) a datalist to a textbox, use the list attribute.

Note: Unlike dropdowns (<select> elements), users will still be able to enter free-text values.

Code Explanation

  • <datalist> - defines a data list element
  • <option> - defines the suggested data items
  • <input> - defines an HTML input element
    • list - attribute that binds the datalist id to the input element

Attributes for <datalist>

The <datalist> element has no attributes, but it does accept global attributes. Of these, the id is always used; in fact, it is required.

Attribute Value Description
id   value Provides the datalist element with a unique identifier.

For additional global attributes see our global attributes list.

Did you know?

Did you know?

Difference between select and datalist

Both <select> and <datalist> allow users to select from a list of options.
What is the difference? This table compares the two.

A dropdown value (option) must be selected. Dropdown values are just suggestions. Users are free to enter their own value.
The option element may have different label and values (name/value pairs). The option element has the same label and value.
The onchange event is fired immediately when the value changed. The onchange event is fired once the element loses focus or the enter key is pressed.

Summary: With a select element the dropdown options are the only acceptable values. With datalists, the options are suggested values only -- you can still enter any other value. Note that in the real-world solutions, datalists are rarely used.

Form Tags

The <datalist> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, they allow you to create comprehensive data input solutions.

Here is a list of form tags

Element Description
<form> Defines a data entry area that contains input elements
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<textarea> Creates a multi-line text input control
<select> Creates a dropdown control
<button> Creates a clickable button that can contain text or an image
<datalist> Specifies a list of options for a textfield (<input>) element
<fieldset> Groups related form elements and displays a box with a legend around these
<legend> Defines a caption for a fieldset

Browser support

Here is when <datalist> support started for each browser:

20.0 Jun 2012
4.0 Mar 2011
10.0 Sep 2012
12.1 Nov 2012
12.1 Mar 2019

You may also like

Last updated on Sep 30, 2023