HTML <select> Tag - select and option Elements

HTML <select> Tag: Building Dropdown Menus

Sometimes, users don’t need to type — they just need to choose. The <select> tag creates a dropdown menu where users can pick from predefined options. It's perfect for countries, categories, ratings, and yes — even favorite fruits.

Basic Structure of a Select Element

The <select> element wraps around one or more <option> tags. Each <option> represents a possible choice.

<label for="fruit">Choose a fruit:</label>
<select id="fruit" name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Choose a fruit: [ Apple ▼ ]

When submitted, the selected value (like "banana") will be passed as part of the form data.

Setting a Default Selection

You can preselect a value using the selected attribute.

<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana" selected>Banana</option>
  <option value="cherry">Cherry</option>
</select>

[ Banana ▼ ]

This improves usability when one option is the most common or recommended.

Adding a Placeholder Option

If you want to nudge users to make a choice, use a disabled, selected first option:

<select name="fruit">
  <option disabled selected>-- Select a fruit -->
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</select>

[ -- Select a fruit -- ▼ ]

This option can’t be selected on submit — it's just a friendly guide.

Creating a Multi-Select List

Add the multiple attribute to allow more than one selection. You’ll also want to adjust the size to show more than one line.

<label for="fruits">Select multiple fruits:</label>
<select id="fruits" name="fruits" multiple size="3">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Apple  
Banana  
Cherry  
(hold Ctrl/Command to select multiple)

Form submission will include all selected values under the fruits name.

Grouping Options with <optgroup>

If you have related sets of options, use <optgroup> to visually separate them.

<select name="food">
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option>Carrot</option>
    <option>Spinach</option>
  </optgroup>
</select>

[ Fruits ▸ ]
  Apple
  Banana
[ Vegetables ▸ ]
  Carrot
  Spinach

This adds semantic structure and clarity, especially for longer lists.

Best Practices

• Use label with for to describe the dropdown
• Always define value in each option — it's what gets submitted
• Group logically using <optgroup> when necessary
• Set default or placeholder options to guide user interaction

Full Example: Fruit Selection Form

<form action="/submit" method="post">
  <label for="fruit">Choose your favorite fruit:</label><br>
  <select id="fruit" name="fruit">
    <option disabled selected>-- Select one -->
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select><br><br>

  <input type="submit" value="Submit">
</form>

Choose your favorite fruit:
[ -- Select one -- ▼ ]
[Submit]

Summary

The <select> tag creates clean, structured dropdowns that simplify user choice. You’ve learned to:

• Create single and multi-select dropdown menus
• Set default selections and placeholders
• Group options meaningfully

What’s Next?

Up next, we’ll cover Checkboxes and Radio Buttons — essential tools for collecting user preferences and single/multi-choice answers.