Input HarborISSUE #13 of 46

select · option · optgroup · datalist

FormaVSCaptain Invalid Input

Forma says<select> builds a dropdown from <option>s; <optgroup> groups them and <datalist> adds autocomplete to a text input.

<select> wraps <option> elements to make a dropdown; the option's value is submitted (its text is what's shown). Add multiple for multi-select, <optgroup label> to categorize long lists.

A different tool: <datalist> attaches a list of suggestions to a normal text input via list= — the user can pick a suggestion or type something new. Use select for fixed choices, datalist for "suggest but allow free text".

Power-ups you unlock

<select> + <option> = dropdown; option value is submitted
multiple = multi-select · <optgroup> categorizes
<datalist> gives a text input autocomplete suggestions
select = fixed list · datalist = suggest + allow free text

Captain Invalid Input attacks — common mistakes

Showing labels but forgetting option values → blank submissions
Using a giant select where a searchable datalist fits better
Datalist list= id not matching the <datalist id> (no suggestions)

Boss battleMake a select with an optgroup of two options, then a text input with a datalist of three suggestions.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <p><label>plan
      <select name="plan">
        <optgroup label="personal"><option>free</option><option>pro</option></optgroup>
        <optgroup label="team"><option>startup</option><option>scale</option></optgroup>
      </select>
    </label></p>
    <p><label>fruit
      <input list="fruits" name="fruit">
      <datalist id="fruits"><option value="apple"><option value="banana"><option value="cherry"></datalist>
    </label></p>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Labels · For · Id · Accessibility Textarea · Multiline Input ›