HTML Select Menus

Understanding HTML Select Menus

The HTML <select> element creates a form control that lets users choose from a predefined list of options.

Select menus are useful when the available choices are known in advance and displaying every option as a separate radio button or checkbox would take up too much space.

The <select> Element

The <select> element creates a menu or list of choices. Each available choice is placed inside the select element using an <option> element.

<select id="vehicle" name="vehicle">
  <option value="chevy">Chevy</option>
  <option value="dodge">Dodge</option>
  <option value="ford">Ford</option>
  <option value="jeep">Jeep</option>
</select>

The name attribute identifies the selected value when the form is submitted.

The <option> Element

The <option> element defines one choice inside a select menu.

<option value="ford">Ford</option>

The text between the opening and closing tags is what the user sees in the menu. For tutorial consistency and clarity, each option is written with an explicit closing </option> tag.

Option Values

The value attribute specifies the value associated with an option when that option is selected and the form is submitted.

<option value="jeep">Jeep</option>

The visible text and submitted value can be the same or different, depending on what the receiving resource needs.

Default Selected Option

The boolean selected attribute identifies the option that should be selected when the page first loads.

<select name="vehicle">
  <option value="chevy">Chevy</option>
  <option value="dodge">Dodge</option>
  <option value="ford" selected>Ford</option>
  <option value="jeep">Jeep</option>
</select>

If no option is marked with selected, browsers normally select the first available option.

Multiple Selections

The boolean multiple attribute allows users to select more than one option from a select control.

<select name="vehicles[]" multiple>
  <option value="chevy">Chevy</option>
  <option value="dodge">Dodge</option>
  <option value="ford">Ford</option>
  <option value="jeep">Jeep</option>
</select>

When several values are submitted, the receiving application must be prepared to handle multiple selections. The exact way users select several options can vary by device and operating system.

The size Attribute

The size attribute specifies how many options should be visible at one time.

<select name="vehicle" size="4">
  <option value="chevy">Chevy</option>
  <option value="dodge">Dodge</option>
  <option value="ford">Ford</option>
  <option value="jeep">Jeep</option>
</select>

A select element with a larger size appears more like a visible list than a traditional drop-down menu.

Select Menu Labels

A select menu should have a clear visible label that describes the choice the user is being asked to make.

<label for="select-input">Vehicle:</label>
<select id="select-input" name="select-input">
  <option value="chevy">Chevy</option>
  <option value="dodge">Dodge</option>
  <option value="ford">Ford</option>
  <option value="jeep">Jeep</option>
</select>

The label's for value should match the select element's id.

Select Menu Example

The following example uses the Vehicle select menu from the master form. Change the option values, add selected, or experiment with the size and multiple attributes to see how the control changes.

Select Menu Best Practices

• Provide a visible label that clearly describes the choice being requested.
• Give each option a meaningful submitted value.
• Use selected only when a default choice is appropriate.
• Use multiple only when users genuinely need to select more than one option.
• Keep option text concise and easy to distinguish.
• Explicitly close each <option> element for clear, consistent tutorial markup.

Summary

The <select> element creates a menu or list of predefined choices, while each <option> element defines an available selection. Attributes such as value, selected, multiple, and size control how choices are represented and selected.

Select menus work well when users should choose from a known set of options without displaying every choice as a separate form control.