Select dropdown in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a dropdown menu with options.

HTML

<select>[1]</select>

Drag options to blanks, or click blank then click option'

A<option>Option 1</option>

B<div>Option 1</div>

C<input>Option 1</input>

D<button>Option 1</button>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <div> or <input> inside <select>.

Forgetting to use <option> tags.

The <option> tag defines an option in a dropdown menu inside a <select> element.

2fill in blank

medium

Complete the code to set a default selected option in the dropdown.

HTML

<select>
  <option>Apple</option>
  <option [1]>Banana</option>
  <option>Cherry</option>
</select>

Drag options to blanks, or click blank then click option'

Aselected

Bchecked

Cdefault

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using checked instead of selected.

Using non-existent attributes like default or active.

The selected attribute marks an option as the default selected in a dropdown.

3fill in blank

hard

Fix the error in the dropdown code by filling the blank.

HTML

<select>
  <option value="1">One</option>
  <option value="2" [1]>Two</option>
  <option value="3">Three</option>
</select>

Drag options to blanks, or click blank then click option'

Aselect

Bchecked

Cdefault

Dselected

Attempts:

3 left

💡 Hint

Common Mistakes

Using checked which is for checkboxes.

Using select which is not a valid attribute.

The correct attribute to mark an option as selected is selected. Other options cause errors or have no effect.

4fill in blank

hard

Fill both blanks to create a dropdown with a label and a disabled option.

HTML

<label for="fruits">Choose a fruit:</label>
<select id="fruits" name="fruits">
  <option [1]>Select one</option>
  <option value="apple">Apple</option>
  <option value="banana" [2]>Banana</option>
</select>

Drag options to blanks, or click blank then click option'

Adisabled

Bselected

Creadonly

Dchecked

Attempts:

3 left

💡 Hint

Common Mistakes

Using readonly or checked which are invalid here.

Not disabling the placeholder option.

The first option is disabled to prevent selection, and the second option is selected by default.

5fill in blank

hard

Fill all three blanks to create a dropdown with multiple options, a label, and a required attribute.

HTML

<label for="colors">Pick a color:</label>
<select id="colors" name="colors" [1]>
  <option value="red">Red</option>
  <option value="green" [2]>Green</option>
  <option value="blue" [3]>Blue</option>
</select>

Drag options to blanks, or click blank then click option'

Arequired

Bselected

Cdisabled

Dmultiple

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing multiple with required.

Not disabling the blue option properly.

The required attribute makes the dropdown mandatory to select. The green option is selected by default, and the blue option is disabled.

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