New in HTML5.

HTML Code: You Can Use It, But Does Your Browser Support It?

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Web Forms Tutorial For Coding Beginners
What does HTML Code: You Can Use It, But Does Your Browser Support It? 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.

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">


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)