HTML Select Dropdown

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.

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.

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.

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.

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.

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.

• 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

<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]

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

Choose the option that lists all and only the correct statements.

1. name
2. multiple
3. value
4. size

Choose the option that lists all and only the correct statements.

1. <select name="language"><option>Hindi</option></select>

2. <select><option value="bio" selected>Biology</option></select>

3. <select multiple><option>Physics</option></select>

4. <option>Maths</option><select></select>

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