- Element of
- What does
- 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.
<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>
<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
<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.
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
Browser Support for datalist
|11 (incomplete)||43 (incomplete)||45 (incomplete)||13 (incomplete)||Not supported.||34 (incomplete)|