HTML 5 <datalist> Tag

The HTML <datalist> tag is used for providing an "autocomplete" feature on form elements. It enables you to provide a list of predefined options to the user as they input data.

For example, if a user began entering some text into a text field, a list would drop down with prefilled values that they could choose from.

Usage

The <datalist> tag can be used in conjunction with an <input> element that contains a list attribute.

The list attribute is linked to the <datalist> tag by the <datalist> tag's ID. For example, if the <datalist> tag contains id="myData", then the list attribute will look like this: list="myData".

You can fill the <datalist> element by nesting <option> tags inside the <datalist> tag.

The <datalist> tag was introduced in HTML 5.

View Output

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML 5 tags (although the tabindex attribute does not apply to dialog elements).

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

For a full list of event handlers, see HTML 5 event handler content attributes.

Related