How to Use the select Element

The HTML select element is a form control for choosing a value from a set of options. Use it when people should choose from known candidates, such as a country, category, or quantity, instead of entering free-form text.

The answer first

Minimal example

<label for="pet">Favorite animal</label>
<select id="pet" name="pet">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
</select>

The matching for and id values associate the label with the control. The page shows “Cat” and “Dog”, while form submission uses cat or dog from the selected option's value.

This example explicitly sends a GET request to this page. When you submit it, the selected animal's value is included in the URL query. A real form also needs server-side handling at the destination.

Build the options

Write the text that people should read between the option tags. Use value for the value your application receives. Separating the visible label from the submitted identifier lets the interface use human-friendly text while the application uses stable values.

Markup	Role
<option value="html">HTML</option>	Displays HTML and submits html
<option selected>Choose one</option>	Starts as the selected option
<option disabled>Coming soon</option>	Shows an option that cannot be chosen

When value is omitted, the submitted value is derived from the option's text. For forms whose values are processed by an application, it is clearer to set value explicitly.

Choose one or many

Goal	Markup	How it works
Choose one	<select>	Choose one option from the usual drop-down
Choose many	<select multiple>	Choose multiple options; explain the interaction
Show more rows	<select size="4">	Set how many options are visible at once

<label for="topics">Topics of interest</label>
<select id="topics" name="topics" multiple size="3">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

When multiple is present, the selected options are submitted using the same field name. Because the exact interaction can vary by platform, explain how to select multiple options near the control.

Group related options

When there are many choices, use optgroup to group related options. Its label organizes the list; it is not itself an option that can be selected.

<label for="language">Language</label>
<select id="language" name="language">
  <optgroup label="Markup">
    <option value="html">HTML</option>
  </optgroup>
  <optgroup label="Programming">
    <option value="javascript">JavaScript</option>
  </optgroup>
</select>

Make a choice required

For a required single-choice control, put an empty-valued instruction option first and add required.

<label for="plan">Plan</label>
<select id="plan" name="plan" required>
  <option value="">Choose a plan</option>
  <option value="basic">Basic</option>
  <option value="pro">Pro</option>
</select>

If the instruction option is still selected, its empty value fails the browser's constraint validation. Browser validation helps people complete the form; the server must validate the submitted value too.

Common mistakes

• Writing choices as plain text inside select. Selectable items belong in option elements.
• Adding a placeholder attribute to select. Use an empty-valued instruction option instead.
• Relying on the visible label as the submitted value. Set the application value with value.
• Replacing the native select with a large JavaScript widget only for visual styling. Start with the native control, which already supports keyboard and assistive technology interaction.
• Providing a multiple-choice control without explaining how to use it. Add a nearby instruction for multiple.

Going further

Although a select can look small, it involves single and multiple selection, display size, selected state, form submission, constraint validation, and accessibility. Consider whether people can compare the options, operate the control with a keyboard, and understand the submitted values.

Check it in Atlas

For an option's value, selectedness, disabled state, and the HTMLOptionElement API, see the option element in Yugien Atlas. For choice grouping, label resolution, and disabled boundaries, see optgroup in Atlas. For the specification branches for single and multiple selection, placeholder label options, form owners, the HTMLSelectElement API, and accessibility mappings, see the select element in Atlas. The shared form submission model is covered by the form element in Atlas, and label association by the label element in Atlas.