Loading...

HTML Select

When the answer must be one of several known choices, a select dropdown (or list) is clearer than free typing.

Direct answer

Wrap <option> elements in <select name="…">. The selected option’s value is what gets submitted. Label the control. Use <optgroup label="…"> to group options when the list is long.

Basic select

html
HTML Code 
<label for="city">City</label>
<select id="city" name="city">
<option value="">Choose…</option>
<option value="teh">Tehran</option>
<option value="isf">Isfahan</option>
</select>

Options with optgroup

html
HTML Code 
<label for="meal">Meal</label>
<select id="meal" name="meal">
<optgroup label="Veg">
<option value="salad">Salad</option>
<option value="soup">Soup</option>
</optgroup>
<optgroup label="Other">
<option value="stew">Stew</option>
</optgroup>
</select>

Try it

  1. Create a labeled select with three city options
  2. Include an empty “Choose…” option first
  3. Add an optgroup version for practice
  4. Confirm name and value are set

Easy mistakes

  • Forgetting value so the visible text is submitted unintentionally (sometimes OK, often not what you meant)
  • No label on the select
  • Huge ungrouped lists that are hard to scan

Summary

  • select + option build choice lists
  • name on select; value on options
  • optgroup organizes long lists
  • Always label the control

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
5
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial