HTML <datalist> Tag

The <datalist> tag creates a list of pre-defined data items. This list is associated to a textbox which displays the datalist items in a dropdown.

HTML Tag

Example

#

A <datalist> that is associated with an input field.
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#">
</datalist>

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

Using <datalist>

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

These lists are 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.

SELECT DATALIST
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, these tags 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:

Chrome
20.0 Jun 2012
Firefox
4.0 Mar 2011
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
12.1 Mar 2019

You may also like

Guides