Text and choice controls

Select menus

Build a native select control with meaningful option values, an optional prompt, and multiple selection only when the interaction warrants it.

8 minute lesson

~~~

A select offers a known set of choices and submits the value of the selected option.

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="">Choose a country</option>
  <option value="dk">Denmark</option>
  <option value="it">Italy</option>
</select>

The visible label is for people. The value is the server contract. Selecting Italy sends country=it.

The empty first option works as a prompt. With required, the browser asks for another choice before native submission. The server must make the same decision because a handcrafted request can still send an empty or unknown value.

Do not use a huge select merely because the data is a list. Searching hundreds of options is difficult. An autocomplete or another focused control may be better.

Add multiple only when several choices are allowed. A multiple select can be difficult to operate, and it submits the same name more than once:

topic=html&topic=css

The server must use a method such as getAll('topic') rather than reading only the first value.

Change the visible country labels without changing their values. Submit again and confirm the request contract stays stable.

Lesson completed