HTML <datalist> tag

Updated: 10/11/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">

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.


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.


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

Additional form elements

Browser, Compatibility, Web design terms