Grouped and multiple selects in HTML

A long list of options wants headings, and sometimes more than one answer.

<label for="stack">Languages</label>
<select id="stack" name="stack" multiple size="6">
  <optgroup label="Systems">
    <option value="c">C</option>
    <option value="rust" selected>Rust</option>
    <option value="go">Go</option>
  </optgroup>
  <optgroup label="Scripting">
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
  </optgroup>
</select>

How it works

1. <optgroup label> groups options; the group itself is not selectable.
2. multiple allows several, and size shows that many rows at once.
3. A multiple select posts its name once per chosen option.

The run, in numbers

Lines

12

Characters to type

367

Tokens

104

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 89 seconds.

Type this snippet

Step 4 of 6 in Choices, step 12 of 25 in Forms & inputs.

← Previous Next →