Radio buttons and checkboxes in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a radio button for selecting 'Male'.

HTML

<label><input type="[1]" name="gender" value="male"> Male</label>

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 radio buttons.

Forgetting to set the 'type' attribute.

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

2fill in blank

medium

Complete the code to create a checkbox for subscribing to a newsletter.

HTML

<label><input type="checkbox" name="subscribe" [1]> Subscribe to newsletter</label>

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

Adisabled

Breadonly

Cchecked

Dvalue="yes"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' to select the checkbox by default.

Using 'readonly' which is not valid for checkboxes.

The checked attribute makes the checkbox selected by default.

3fill in blank

hard

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

HTML

<label><input type="radio" name="[1]" value="option1"> Option 1</label>
<label><input type="radio" name="option2" value="option2"> Option 2</label>

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

Aoption1

Boption2

Cchoice

Dgroup1

Attempts:

3 left

💡 Hint

Common Mistakes

Giving different name values to radio buttons that should be grouped.

Omitting the name attribute.

Radio buttons must share the same name attribute to be grouped.

4fill in blank

hard

Fill both blanks to create a checkbox input with an accessible label and a unique id.

HTML

<input type="[1]" id="[2]" name="subscribe">
<label for="subscribe">Subscribe</label>

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

Acheckbox

Bradio

Csubscribe

Dnewsletter

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching the id and label's for attribute.

Using radio instead of checkbox.

The input type should be checkbox and the id must match the label's for attribute for accessibility.

5fill in blank

hard

Fill all three blanks to create a group of radio buttons with the same name and unique values.

HTML

<label><input type="radio" name="[1]" value="[2]"> Yes</label>
<label><input type="radio" name="[1]" value="[3]"> No</label>

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

Achoice

Byes

Cno

Doption

Attempts:

3 left

💡 Hint

Common Mistakes

Using different name attributes for each radio button.

Using the same value for different options.

Radio buttons in a group share the same name but have different value attributes.