HTML <datalist> tag

Updated: 11/13/2018 by Computer Hope
HTML datalist tag

When writing in HTML, the <datalist> tag is used to designate a list of options in the <input> element. These options can be selected using a drop-down menu, or via autocomplete if the user starts typing one of them. The following sections contain information about the <datalist> tag, including an example of it in use, and related attributes and browser compatibility.

Note

The <datalist> tag belongs to a group of tags called form elements.

Example of <datalist> code

<div>Choose your favorite color from this list:</div>
<input list="colors" />
<datalist id="colors">
<option value="Red"></option>
<option value="Green"></option>
<option value="Blue"></option>
<option value="Orange"></option>
<option value="Purple"></option>
</datalist>

Example result

Choose your favorite color from this list:


If you hover your mouse cursor over the right side of the box, a down arrow appears. Click this arrow to choose your favorite color.

Attributes

Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair. While the <datalist> tag does not have any unique attributes, it does utilize all of the standard attributes.

Compatibility

Edge Internet Explorer Firefox Safari Opera Chrome
All versions 10+ 4.0+ Not supported 9.5+ 20+

Additional form elements

Browser, Compatibility, Web design terms