New in HTML5.

<datalist> HTML Tag

Element of
Forms
What does <datalist> HTML Tag do?
The <datalist> element is used to define autocompletion values for an associated <input> element. Suggested autocompletion values are added to a datalist by nesting one or more <option> elements between the opening and closing <datalist> tags.
Display
inline

Code Example

<label for="color">Favorite Color</label>
<input list="colors" name="color">
<datalist id="colors">
    <option value="Green">
    <option value="Red">
    <option value="Blue">
    <option value="Yellow">
    <option value="Orange">
    <option value="Purple">
    <option value="Black">
    <option value="White">
    <option value="Gray">
    <option value="Plaid">
</datalist>

Autocomplete

The <datalist> element provides an HTML-only way of providing a set of auto-complete options to a text <input> form field. This can be used similar to a <select> (drop-down) menu, but also allows for free entry by the user.

Not well supported

The <datalist> element is not well supported across all browsers. Several browsers do not support it at all, and (as of this writing) no browser supports the full specification. For that reason, it is probably best to find alternate ways of accomplishing the same effect.

Alternatives to <datalist>

If you can actually limit the user’s input to the predefined options, and you don’t need free-entry, you can simply use the standard <select> element. If you need type-entry autocomplete, the most widely supported solution is Javascript. JQueryUI‘s autocomplete module is probably the most commonly used option.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for datalist

11 (incomplete)43 (incomplete)45 (incomplete)13 (incomplete)Not supported.34 (incomplete)