Datalists

• Offers the user a list of possible values to input

• list attribute names a datalist element

• datalist element contains option elements specifying the possible values

• The option element can have a value attribute or value content

• Other values may still be typed manually.

• Some tricks are needed for legacy browsers.

<form>
 <p><label>Type the species:
  <input type="text" name="species" list="species" />
 </label></p>
 <p><datalist id="species">
  <label>
   or choose one from the list:
   <select name="species">
    <option>Double-crested Cormorant</option>
    <option>Great Cormorant</option>
    <option>Great Blue Heron</option>
    <option>Little Blue Heron</option>
    <!-- ... -->
   </select>
  </label>
 </datalist></p>
 <p><label><input type="submit" value="Send data" /></label></p>
</form>