Select dropdowns (select and option)

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which element creates the dropdown container?

A <select>

B <dropdown>

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

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

A True

B False

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

A default

B selected

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

A False

B True

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<select name="colour"> <option value="red">Red</option> <option value="blue">Blue</option> </select>		AA dropdown with two options — name on select identifies the submission key; value on option is the submitted data
2<option value="au" selected>Australia</option>		BTag names must be lowercase — <SELECT> and </SELECT> should be <select> and </select>
3The value attribute on <option> is the data submitted — the visible text is just the label		CThe option is missing its value attribute — without value, the visible text is submitted instead of a clean data value
4<select> needs name and each <option> needs value for the dropdown to be useful in a form		DThe selected attribute marks this option as the default choice when the page loads
5<SELECT name="role"> <option value="a">Admin</option> </SELECT>		E<select name="size"> <option value="s">Small</option> <option value="l">Large</option> </select>
6<select name="size"> <option>Small</option> </select>		F<option value="m">Medium</option>

Definitions

Fill in the Blanks

Complete each line of code by filling in the missing parts.

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

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

<select name="role"> <option value="a">Admin</option> </______)

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

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <SELECT name="colour">

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

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

D </select>

Question 2

A <select name="size">

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

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

D </select>

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>

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>

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>

Answer Key

Select dropdowns (select and option)

Section A: Quick Questions

A — <select>

A — The data sent to the server when the form submits

B — False

B — selected

A — False

Section B: 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

Section C: Definitions

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

Section D: Fill in the Blanks

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

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

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

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

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

Section E: Spot the Error

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

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

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

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

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