HTML <datalist> tag

When writing in HTML (hypertext markup language), the <datalist> tag designates 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.

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

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

All HTML tags support standard attributes that define the settings of an HTML element. Unlike other HTML tags, the <datalist> tag has no unique attributes.

Compatibility

Additional form elements

• <button>
• <fieldset>
• <input>
• <keygen>
• <label>
• <legend>
• <optgroup>
• <option>
• <output>
• <select>
• <textarea>

Browser, Compatibility, Container tag, Web design terms