HTML <datalist> tag

Updated: 05/08/2017 by Computer Hope

HTML datalist tagWhen writing in HTML, the <datalist> tag is used to designate a list of options within 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, as well as related attributes and browser compatibility.

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

Example code

<div>Choose your favorite color from this list:</div>
<input list="colors" />
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Blue">
<option value="Orange">
<option value="Purple">
</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 will appear. 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

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

Additional form elements

Browser, Compatibility