Select dropdown in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What HTML tag is used to create a dropdown list?

The <select> tag is used to create a dropdown list in HTML.

beginner

How do you define options inside a dropdown list?

Use the <option> tag inside the <select> element to define each choice in the dropdown.

beginner

How can you set a default selected option in a dropdown?

Add the attribute selected to the <option> tag you want to show as default.

beginner

What attribute of the <select> tag helps identify the selected value when submitting a form?

The name attribute on the <select> tag is used to identify the selected value when the form is submitted.

intermediate

How can you make a dropdown accessible for screen readers?

Use a <label> with a for attribute matching the <select> id, and ensure clear option text for screen readers.

Which tag creates a dropdown list in HTML?

A <select>

B <dropdown>

C <list>

D <option>

The tag is the correct HTML element to create a dropdown list.

How do you specify each choice inside a dropdown?

A <choice>

B <option>

C <item>

D <select>

Each choice inside a dropdown is defined with the tag.

What attribute marks an option as the default selected in a dropdown?

A selected

B checked

C default

D active

The selected attribute marks an option as the default selected.

Which attribute on <select> helps identify the selected value in form data?

A id

B class

C value

D name

The name attribute is used to identify the selected value when submitting a form.

How do you link a label to a dropdown for accessibility?

A Wrap <select> inside <label> without attributes

B Use aria-label on <option>

C Use for attribute on <label> matching <select> id

D Use title attribute on <select>

The for attribute on matching the

id links them for screen readers.

Explain how to create a basic dropdown list in HTML and set a default option.

Think about the tags needed and how to mark one option as chosen by default.

Describe how to make a dropdown accessible for users with screen readers.

Consider how labels and ids help screen readers understand the dropdown.

Practice

1. What does the <select> tag do in HTML?

easy

A. Creates a dropdown list for users to choose from

B. Creates a text input box

C. Creates a button

D. Creates a paragraph

Solution

1. Step 1: Understand the purpose of the <select> tag

   The <select> tag is designed to create a dropdown list where users can pick one option from many.

2. Step 2: Compare with other tags

   Other tags like <input> create text boxes, <button> creates buttons, and <p> creates paragraphs, so they do not create dropdowns.

3. Final Answer:

   Creates a dropdown list for users to choose from -> Option A

4. Quick Check:

   <select> = dropdown list [OK]

Hint: Remember: <select> always means dropdown [OK]

Common Mistakes:

• Confusing <select> with <input>
• Thinking <select> creates buttons
• Mixing <select> with paragraph tags

2. Which of the following is the correct way to add options inside a dropdown?

easy

A. <button>Choice 1</button>

B. <select>Choice 1</select>

C. <input>Choice 1</input>

D. <option>Choice 1</option>

Solution

1. Step 1: Identify the tag used for dropdown options

   The <option> tag is used inside <select> to list choices.

2. Step 2: Check other tags

   <select> is for the dropdown container, <input> and <button> are unrelated to dropdown options.

3. Final Answer:

   <option>Choice 1</option> -> Option D

4. Quick Check:

   Options inside dropdown = <option> [OK]

Hint: Options inside dropdown use <option> tags [OK]

Common Mistakes:

• Putting options directly inside <select> without <option>
• Using <input> or <button> instead of <option>
• Closing with which is invalid

3. What will the following HTML render in the browser?

<label for="fruits">Choose a fruit:</label>
<select id="fruits" name="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

medium

A. A dropdown labeled 'Choose a fruit:' with options Apple, Banana, Cherry

B. A text box labeled 'Choose a fruit:'

C. Three buttons labeled Apple, Banana, Cherry

D. A paragraph with the text 'Choose a fruit:' and a list of fruits

Solution

1. Step 1: Analyze the label and select tags

   The <label> is linked to the <select> by the 'for' and 'id' attributes, showing 'Choose a fruit:' as the label.

2. Step 2: Understand the <select> content

   The <select> contains three <option> tags: Apple, Banana, and Cherry, which appear as choices in a dropdown.

3. Final Answer:

   A dropdown labeled 'Choose a fruit:' with options Apple, Banana, Cherry -> Option A

4. Quick Check:

   Label + select with options = dropdown with label [OK]

Hint: Label + select with options = dropdown list [OK]

Common Mistakes:

• Thinking it creates buttons instead of dropdown
• Confusing label with placeholder text
• Expecting a text input instead of dropdown

4. Identify the error in this dropdown code:

<select name="colors">
  <option>Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue
</select>

medium

A. The <select> tag cannot have multiple options

B. The name attribute is invalid on <select>

C. Missing closing tag for the last <option>

D. Options cannot have a value attribute

Solution

1. Step 1: Check the last option tag

   The last <option> for Blue is missing its closing </option> tag, which is required for valid HTML.

2. Step 2: Verify other parts

   The name attribute is valid on <select>, options can have value attributes, and multiple options are allowed.

3. Final Answer:

   Missing closing tag for the last <option> -> Option C

4. Quick Check:

   All <option> tags must be closed [OK]

Hint: Always close each <option> tag properly [OK]

Common Mistakes:

• Forgetting to close <option> tags
• Thinking name attribute is invalid on <select>
• Believing options can't have values

5. You want to create a dropdown for selecting a country with these requirements:
- The dropdown must have a label for accessibility.
- The default visible option should say 'Select a country' and not be selectable.
- Options: USA, Canada, Mexico.
Which code snippet meets all these requirements?

hard

A. <select name="country">
<option>Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

B. <label for="country">Country:</label>
<select id="country" name="country">
<option value="" disabled selected>Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

C. <label>Country</label>
<select id="country">
<option value="" selected>Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

D. <label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

Solution

1. Step 1: Check for label linked to select

   <label for="country">Country:</label> <select id="country" name="country"> <option value="" disabled selected>Select a country</option> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select> uses <label for="country"> and <select id="country">, linking label and dropdown for accessibility.

2. Step 2: Verify default option is disabled and selected

   The first option in A has disabled selected attributes, so it shows as default but cannot be chosen.

3. Step 3: Confirm options list

   Options USA, Canada, Mexico are correctly listed with values.

4. Final Answer:

   This code snippet meets all requirements -> Option B

5. Quick Check:

   Label + disabled selected default option = accessible dropdown [OK]

Hint: Use disabled and selected on default option with label [OK]

Common Mistakes:

• Not linking label with select using for and id
• Default option not disabled, so selectable
• Missing selected attribute on default option