HTML 5 <datalist> Tag
<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.
<datalist> tag can be used in conjunction with an
<input> element that contains a
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:
You can fill the
<datalist> element by nesting
<option> tags inside the
<datalist> tag was introduced in HTML 5.
In the pane below, you will find two examples.
- Example 1 (for HTML 5 browsers): Demonstrates usage for browsers that support the
datalistelement. If when viewing/using this example, you don't see the "autocomplete" feature (containing the contents of the
<option>tags), your browser doesn't support the
- Example 2 (for both legacy and HTML 5 browsers): Demonstrates how to provide the autocomplete values to users whose browsers don't support this element, as well as to those that do. You can place fallback content between the
datalisttags. This content will be only be displayed to browsers that don't support the
datalistelement. On browsers that do support this tag, the autocomplete feature will work as it is supposed to.
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,
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.
The following table shows the attributes that are specific to this tag/element.
The following attributes are standard across all HTML 5 tags (although the
tabindex attribute does not apply to
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.