Select Elements & Dropdown Menus
What is a Dropdown Select?
Imagine ordering coffee. You pull up a menu dropdown showing all the drink options, and click on "Espresso". It saves space on the counter compared to displaying every cup option on the menu board at once.In HTML, we build dropdown menus using:
<select>: The outer dropdown button wrapper.<option>: Nest tags representing each choice. The value attribute contains the computer-readable key sent to the server, while the text inside is what the user sees.Why does it matter?
Dropdown selectors are highly space-efficient. They let users choose from dozens of options (like selecting a country or state) without cluttering your interface layout.How to write it
<select>
<option value="y">Yes</option>
<option value="n">No</option>
</select>
Select Option...
▼
Common Mistakes
value attribute on options: If you write <option>Yes</option> without value="y", the server will receive the text string "Yes" instead of a clean, short code. Always specify values for backend database storage.Quick Reference
<select> — Renders a dropdown select box.<option value="key"> — Defines a choice option.Your Task
Create a `<select>` dropdown. Inside it, place two options: `<option value="y">Yes</option>` and `<option value="n">No</option>`.
index.html
Type code above to start the lesson.
Live Preview