Datalists provide an easy way to provide autocomplete functionality within HTML5 (without Javascript).

The autocomplete functionality provided by <datalist> is from a specified list and differs from browser autocomplete which pulls from a user's previous input.

Browser autocomplete is turned on with the attribute: <input type="text" id="firstname" autocomplete="on">

Example 1

A form field to enter favorite color

   <label for="fav_color">Favorite Color:</label>
   <input type="text" id="fav_color">

Example 1 (continued)

  <label for="fav_color">Favorite Color:</label>
  <input type="text" id="fav_color" list="color_list">

<datalist id="color_list">
   <option>Antique Brass</option>

Example 1 (working)

Example 2

Selecting the hex value associated with the color name

<label for="fav_color">Favorite Color:</label>
<input type="text" id="fav_color" list="color_list2">

<datalist id="color_list2">
 <option value="#EFDECD">Almond</option>
 <option value="#CD9575">Antique Brass</option>

Example 2 (working)


  • Implementation is not universal - or uniform!
  • Firefox works with or without the value attribute, Chrome only works without it! 
  • IE 10 & 11 if used with the value attribute actually matches the attribute itself not the string showing.
  • Firefox matches any part of the string, IE & Chrome only match from the beginning.
  • IE 10 & 11 show the list as soon as you click into the field (FF & Chrome only once you start typing)
  • Check here:

HTML5 Datalist

By Amanda Giles