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

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.

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 Wood

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)