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.