Checkboxes and radios in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap checkbox input.

Bootsrap

<div class="form-check">
  <input class="form-check-input" type="[1]" id="check1">
  <label class="form-check-label" for="check1">Option 1</label>
</div>

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

Atext

Bradio

Ccheckbox

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'radio' instead of 'checkbox' for the input type.

Using 'text' which creates a text box, not a checkbox.

The type attribute for a checkbox input must be checkbox to create a checkbox.

2fill in blank

medium

Complete the code to create a Bootstrap radio button input.

Bootsrap

<div class="form-check">
  <input class="form-check-input" type="[1]" name="options" id="radio1">
  <label class="form-check-label" for="radio1">Choice A</label>
</div>

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

Aradio

Bcheckbox

Cbutton

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'checkbox' instead of 'radio' for the input type.

Using 'button' which does not create a radio button.

The type attribute for a radio button input must be radio to create a radio button.

3fill in blank

hard

Fix the error in the code to correctly group radio buttons so only one can be selected.

Bootsrap

<div class="form-check">
  <input class="form-check-input" type="radio" name="[1]" id="radioA">
  <label class="form-check-label" for="radioA">Option A</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="[1]" id="radioB">
  <label class="form-check-label" for="radioB">Option B</label>
</div>

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

Agroup1

Boption1

Cradio

Dcheckbox

Attempts:

3 left

💡 Hint

Common Mistakes

Giving different name values so radios act independently.

Using 'checkbox' as the name value which is invalid.

Radio buttons are grouped by giving them the same name attribute value. This ensures only one can be selected at a time.

4fill in blank

hard

Fill both blanks to create a disabled Bootstrap checkbox with label 'Accept Terms'.

Bootsrap

<div class="form-check">
  <input class="form-check-input" type="[1]" id="acceptTerms" [2]>
  <label class="form-check-label" for="acceptTerms">Accept Terms</label>
</div>

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

Acheckbox

Bradio

Cdisabled

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'radio' instead of 'checkbox' for the input type.

Using 'readonly' which does not disable checkboxes.

Use checkbox as the input type for a checkbox. Add the disabled attribute to make it unclickable.

5fill in blank

hard

Fill all three blanks to create a group of three radio buttons named 'color' with labels Red, Green, Blue.

Bootsrap

<div class="form-check">
  <input class="form-check-input" type="[1]" name="[2]" id="red">
  <label class="form-check-label" for="red">Red</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="[1]" name="[2]" id="green">
  <label class="form-check-label" for="green">Green</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="[1]" name="[2]" id="blue">
  <label class="form-check-label" for="blue">Blue</label>
</div>

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

Acheckbox

Bcolor

Cradio

Doption

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for each radio input so they don't group.

Using 'checkbox' instead of 'radio' for the input type.

Use radio as the input type for radio buttons. Use the same name attribute value 'color' to group them.