The list Attribute

The Low Down

When an an input with a list attribute that matches a corresponding datalist element comes into focus, a dropdown menu appears populated by the option elements present in the datalist.

• You might think of a datalist input like you would a group of radio buttons with an "Other: _________" choice.
• Firefox 4b12 doesn't show list on focus, only suggests after typing.
• Fallback is just a regular text input.
• Safari 5 accepts the attribute, but doesn't do anything with it.
• Behaves a bit like autocomplete or "suggested" items might. If you type "V" the list will show only items that start with "V".
• Progressive usage by Jeremy Keith

  <form>
    <label for="source">How did you hear about us?</label>
    <datalist id="sources">
      <select name="source">
        <option>please choose...</option>
        <option value="television">Television</option>
        <option value="radio">Radio</option>
        <option value="newspaper">Newspaper</option>
        <option>Other</option>
      </select>
      If other, please specify:
    </datalist>
    <input id="source" name="source" list="sources">
    <input type="submit">
  </form>

  Important: you need to set this for WebKit:

  datalist {
      display: inline-block;
  }