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.

1. 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 the datalist element.
2. 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 the datalist element. On browsers that do support this tag, the autocomplete feature will work as it is supposed to.

Try it

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.

Global Attributes

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

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• 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.

• onabort
• onauxclick
• onblur
• oncancel
• oncanplay
• oncanplaythrough
• onchange
• onclick
• onclose
• oncontextmenu
• oncopy
• oncuechange
• oncut
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformdata
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onlanguagechange
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmouseenter
• onmouseleave
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onpaste
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreset
• onresize
• onscroll
• onsecuritypolicyviolation
• onseeked
• onseeking
• onselect
• onslotchange
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• ontoggle
• onvolumechange
• onwaiting
• onwheel

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