Select dropdown in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visible output of this select dropdown?

Look at the HTML code below. What will the user see in the dropdown menu when they click it?

HTML

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

A A dropdown with only Banana option visible.

B A dropdown with options Apple, Banana, Cherry; Banana is selected by default.

C A dropdown with options Apple, Banana, Cherry; Cherry is selected by default.

D A dropdown with options Apple, Banana, Cherry; Apple is selected by default.

💡 Hint

Look for the 'selected' attribute inside the option tags.

The 'selected' attribute on the Banana option means Banana is the default visible choice in the dropdown.

📝 Syntax

intermediate

Which option causes a syntax error in this select dropdown?

Identify which select dropdown code snippet will cause a syntax error in HTML.

A <select><option value="1">One</option><option value="2">Two</option></select>

B >tceles/<>noitpo/<owT>"2"=eulav noitpo<>noitpo/<enO>"1"=eulav noitpo<>tceles<

C <select><option value="1">One<option value="2">Two</option></select>

D select><option value="1">One</option><option value="2">Two</option></select>

💡 Hint

Check if all option tags are properly closed.

Option C is missing the closing tag for the first option, causing invalid HTML syntax.

❓ accessibility

advanced

Which select dropdown is most accessible for screen readers?

Choose the select dropdown code that best supports screen reader users.

A <select><option>Red</option><option>Green</option><option>Blue</option></select>

B >tceles/<>noitpo/<eulB>noitpo<>noitpo/<neerG>noitpo<>noitpo/<deR>noitpo<>tceles<

C <select aria-label="Pick a color"><option>Red</option><option>Green</option><option>Blue</option></select>

D <label for="colors">Pick a color:</label><select id="colors"><option>Red</option><option>Green</option><option>Blue</option></select>

💡 Hint

Labels help screen readers understand form controls.

Option D uses a linked to the select by id, which is the best practice for accessibility.

❓ layout

advanced

How to make a select dropdown fill the full width of its container?

Given a select dropdown inside a container, which CSS rule makes the dropdown stretch to fill the container's width?

HTML

<div class="container">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

A select { width: 100%; }

B select { display: inline; }

C select { max-width: 50%; }

D select { float: left; }

💡 Hint

Think about how to make an element take all available horizontal space.

Setting width to 100% makes the select fill the container's full width.

🧠 Conceptual

expert

What is the value of the select element after this user interaction?

Consider this HTML and JavaScript. The user selects the third option. What is the value of the select element after the change?

HTML

<select id="mySelect">
  <option value="a">Alpha</option>
  <option value="b">Beta</option>
  <option value="c">Gamma</option>
</select>

<script>
  const select = document.getElementById('mySelect');
  select.value = 'b';
  select.value = 'c';
</script>

A "c"

B "b"

C "a"

D undefined

💡 Hint

The last assignment to select.value sets the final value.

The select.value is set first to 'b', then immediately to 'c', so the final value is 'c'.

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