← HTML & CSS

Select dropdowns (select and option)

An HTML element placed inside <select> to provide one choice in a dropdown. Its value attribute is sent when the form submits; its text content is what the user sees.

Part of: HTML and CSS Journey — Module 32

What it does: value="m" is what gets sent to the server. 'Medium' is the human-readable label the user sees in the dropdown. name on select and value on each option together make the form submission meaningful — size=s or size=l. <select> is the HTML element for dropdowns. <dropdown> is not a valid HTML element. The value attribute holds the submitted data. The visible text is placed between the <option> and </option> tags. HTML tag names must be lowercase. <SELECT> is non-standard — use <select>. Adding the selected attribute to an <option> makes it the default choice. There is no 'default' attribute for options.

Common mistakes: HTML tag names must be lowercase. <SELECT> should be written as <select>. HTML tag names must be lowercase. <OPTION> and </OPTION> should be <option> and </option>.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Select dropdowns (select and option) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which element creates the dropdown container?

Matches

<SELECT name="role"> <option value="a">Admin</option> </SELECT>

↓

Tag names must be lowercase — <SELECT> and </SELECT> should be <select> and </select>

Applying

Meanings

Term

Meaning

An HTML element placed inside <select> to provide one choice in a dropdown. Its value attribute is sent when the form submits; its text content is what the user sees.

Practice

Testing

Gaps

< name="colour">

Check Answer

Spots

1<SELECT name="colour">

2 <option value="red">Red</option>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which element creates the dropdown container?

A. <select> ✓

B. <dropdown>

<select> is the HTML element for dropdowns. <dropdown> is not a valid HTML element.

2. What does the value attribute on <option> provide?

A. The data sent to the server when the form submits ✓

B. The text the user sees in the dropdown

The value attribute holds the submitted data. The visible text is placed between the <option> and </option> tags.

3. True or false: <SELECT> with capital letters is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. <SELECT> is non-standard — use <select>.

4. Which attribute pre-selects an option when the page loads?

A. selected ✓

B. default

Adding the selected attribute to an <option> makes it the default choice. There is no 'default' attribute for options.

5. True or false: a <select> without a name attribute sends its value on form submission.

A. False ✓

B. True

Without name, the selected value is not included in the form data. Always add name to form controls you want to submit.

Match the Pairs

<select name="colour"> <option value="red">Red</option> <option value="blue">Blue</option> </select> → A dropdown with two options — name on select identifies the submission key; value on option is the submitted data

<option value="au" selected>Australia</option> → The selected attribute marks this option as the default choice when the page loads

The value attribute on <option> is the data submitted — the visible text is just the label → <option value="m">Medium</option>

<select> needs name and each <option> needs value for the dropdown to be useful in a form → <select name="size"> <option value="s">Small</option> <option value="l">Large</option> </select>

<SELECT name="role"> <option value="a">Admin</option> </SELECT> → Tag names must be lowercase — <SELECT> and </SELECT> should be <select> and </select>

<select name="size"> <option>Small</option> </select> → The option is missing its value attribute — without value, the visible text is submitted instead of a clean data value

Key Term

<option>

An HTML element placed inside <select> to provide one choice in a dropdown. Its value attribute is sent when the form submits; its text content is what the user sees.

Fill in the Blanks

1. <select name="colour"> <option value="red">Red</option> </select>

Hint: Type the element name that creates a dropdown list

2. <select name="size"> <option value="s">Small</option> </select>

Hint: Type the element name used for each item in a dropdown list

3. <option value="red">Red</option>

Hint: Type the attribute name that holds the submitted value for this option

4. <select name="role"> <option value="a">Admin</option> </select>

Hint: Type the element name for the closing tag of a dropdown list

5. <select name="lang"> <option value="en">English</option> </select>

Hint: Type the element name for the closing tag of a dropdown option

Spot the Error

Question 1

A <SELECT name="colour">

B <option value="red">Red</option>

C <option value="blue">Blue</option>

D </select>

Line A — HTML tag names must be lowercase. <SELECT> should be written as <select>.

Question 2

A <select name="size">

B <OPTION value="s">Small</OPTION>

C <option value="m">Medium</option>

D </select>

Line B — HTML tag names must be lowercase. <OPTION> and </OPTION> should be <option> and </option>.

Question 3

A <select name="country">

B <option value="au">Australia</option>

C <option value=nz>New Zealand</option>

D <option value="uk">UK</option>

E </select>

Line C — Attribute values must be in double quotes: value="nz", not value=nz without quotes.

Question 4

A <select name="role">

B <option value="admin">Admin</option>

C <option value="user">User</option>

D <option value="guest">Guest</option

E </select>

Line D — The last option's closing tag is missing its > angle bracket. It should be </option>.

Question 5

A <form>

B <select name="lang">

C <option value="en">English</option>

D <option value="fr">French</option>

E <option value="de">German</option

F </select>

Line E — The last option's closing tag is missing its > angle bracket. It should be </option>.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?