Select menus in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic select menu with Bootstrap styling.

Bootsrap

<select class="form-select" aria-label="Default select example">
  <option selected>[1]</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

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

ASelect

BChoose an option

COption

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the default option text empty

Using vague words like 'Select' without context

The option with the selected attribute shows the default text in the select menu. "Choose an option" is a clear prompt for users.

2fill in blank

medium

Complete the code to add a label for the select menu for accessibility.

Bootsrap

<label for="fruitSelect" class="form-label">[1]</label>
<select class="form-select" id="fruitSelect" aria-label="Fruit select">
  <option selected>Choose a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

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

ASelect your fruit

BChoose fruit

CPick a fruit

DFruit selection

Attempts:

3 left

💡 Hint

Common Mistakes

Using labels that are too vague or unclear

Not matching the label with the select menu's purpose

The label text should clearly describe what the select menu is for. "Select your fruit" is a clear instruction for users and screen readers.

3fill in blank

hard

Fix the error in the select menu code by completing the missing attribute.

Bootsrap

<select class="form-select" [1] aria-label="Country select">
  <option selected>Choose a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="mx">Mexico</option>
</select>

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

Aid="countrySelect"

Bname="country"

Caria-labelledby="countryLabel"

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using name instead of id for label linking

Adding disabled which prevents selection

The id attribute is needed to link the select menu with its label or for scripting. Without it, accessibility and form behavior can be affected.

4fill in blank

hard

Fill both blanks to create a multiple select menu with Bootstrap styling and proper accessibility.

Bootsrap

<label for="[1]" class="form-label">Select your hobbies</label>
<select class="form-select" id="[2]" multiple aria-label="Hobbies select">
  <option value="reading">Reading</option>
  <option value="sports">Sports</option>
  <option value="music">Music</option>
  <option value="travel">Travel</option>
</select>

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

AhobbySelect

Bhobbies

Chobby

DhobbiesSelect

Attempts:

3 left

💡 Hint

Common Mistakes

Using different ids for label and select

Using vague or inconsistent id names

The label and the select must share the same id value for accessibility. "hobbySelect" is a clear and consistent id.

5fill in blank

hard

Fill all three blanks to create a select menu with a disabled placeholder option and Bootstrap styling.

Bootsrap

<select class="form-select" aria-label="[1]">
  <option value="" [2] selected>[3]</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

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

AColor select

Bdisabled

CSelect a color

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Not disabling the placeholder option

Using an unclear aria-label

Not providing a clear placeholder text

The aria-label describes the select menu for screen readers. The placeholder option is disabled and selected to prompt the user to pick a color.