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.
Example
In the pane below, you will find two examples.
- Example 1 (for HTML 5 browsers): Demonstrates usage for browsers that support the
datalist
element. 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 thedatalist
element. - 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
datalist
tags. This content will be only be displayed to browsers that don't support thedatalist
element. On browsers that do support this tag, the autocomplete feature will work as it is supposed to.
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.
Attribute | Description |
---|---|
None |
Global Attributes
The following attributes are standard across all HTML 5 tags.
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- spellcheck
- style
- tabindex
- title
- translate
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.
Here are the standard HTML 5 event handler content attributes.
- onabort
- oncancel
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
For a full explanation of these attributes, see HTML 5 event handler content attributes.