📝 Phase 8 · Forms🟢 BeginnerMODULE 32

Select Menus

⏱️ 13 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress91%

🎯 What you'll learn: The <select>/<option> dropdown pattern, grouping options with <optgroup>, and allowing multiple selections.

Section 1

Basic Dropdown

A <select> element wraps a list of <option> elements. Only one option is visible at a time until the user clicks to expand it — great for long lists that would take too much space as radios.

select-basic.html

HTML

<label for="country">Country</label>
<select id="country" name="country">
  <option value="pk">Pakistan</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

Country

Section 2

selected & disabled Options

Use selected on an option to pre-select it. A disabled option is visible but can't be picked — useful for a non-selectable placeholder like "Choose one...".

select-placeholder.html

HTML

<select name="plan" required>
  <option value="" disabled selected>Choose a plan...</option>
  <option value="free">Free</option>
  <option value="pro">Pro</option>
</select>

💡

disabled + selected = a real placeholder

Combining both means the placeholder shows by default but the user can't accidentally "submit" it — required will still force them to pick a real option.

Section 3

Grouping With optgroup

<optgroup> creates a visually separated, labeled section inside a long dropdown — handy for organizing dozens of options into categories.

select-optgroup.html

HTML

<select name="course">
  <optgroup label="Web Dev">
    <option value="html">HTML & CSS</option>
    <option value="react">React</option>
  </optgroup>
  <optgroup label="Networking">
    <option value="ccna">CCNA</option>
  </optgroup>
</select>

Section 4

Multiple Selection

Adding the multiple attribute turns the dropdown into a scrollable list box where the user can Ctrl/Cmd-click to select several options at once.

select-multiple.html

HTML

<label for="skills">Skills (Ctrl/Cmd-click to select multiple)</label>
<select id="skills" name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

Attribute	Effect
multiple	Allows selecting more than one option
size	Number of visible rows without needing to open the dropdown

🧩 Knowledge Check — Lesson 32

5 questions to test your select menu knowledge.

1. What element wraps a list of options in a dropdown?

2. Which attribute pre-selects an option by default?

3. How do you make a "Choose one..." option unselectable but still visible?

4. What does <optgroup> do?

5. What does the multiple attribute on a select do?

💪

Coding Challenge — Lesson 32

Apply what you learned · Beginner Level

Challenge: Build a Course Level Selector

Build a select named "level" with a disabled+selected placeholder "Select your level...", followed by three real options: Beginner, Intermediate, Advanced.

💡 Show hints if you're stuck

Placeholder option: value="" disabled selected

Finished this lesson?

Mark it complete to track your progress.

Module 32 of 62Phase 8 — Forms

Select Menus

Basic Dropdown

selected & disabled Options

Grouping With optgroup

Multiple Selection

Lesson 32 Complete!