Bird
Raised Fist0
HTMLmarkup~30 mins

Radio buttons and checkboxes in HTML - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Create a Simple Survey Form with Radio Buttons and Checkboxes
📖 Scenario: You want to create a small survey form on a webpage. The form will ask users about their favorite fruit and which hobbies they enjoy. You will use radio buttons for the fruit question because users can only pick one fruit. You will use checkboxes for the hobbies question because users can pick many hobbies.
🎯 Goal: Build a simple HTML form with a question about favorite fruit using radio buttons and a question about hobbies using checkboxes. The form should be accessible and easy to use.
📋 What You'll Learn
Use semantic HTML form elements
Create radio buttons for the fruit question with exactly these options: Apple, Banana, Cherry
Create checkboxes for the hobbies question with exactly these options: Reading, Sports, Music
Add labels for each input for accessibility
Group radio buttons with the same name attribute
Use unique id attributes for each input
Include a submit button at the end
💡 Why This Matters
🌍 Real World
Forms with radio buttons and checkboxes are common on websites for surveys, preferences, and settings.
💼 Career
Understanding how to build accessible forms is essential for web developers to create user-friendly and inclusive websites.
Progress0 / 4 steps
1
Create the basic HTML form structure
Write the HTML code to create a <form> element with a <fieldset> and <legend> for the favorite fruit question. Inside the fieldset, add three radio button inputs with labels for Apple, Banana, and Cherry. Use the name attribute favorite_fruit for all radio buttons. Each input must have a unique id matching its label's for attribute.
HTML
Hint

Remember to use the same name for all radio buttons so only one can be selected.

2
Add a hobbies question with checkboxes
Below the favorite fruit fieldset, add another <fieldset> with a <legend> that says Which hobbies do you enjoy?. Inside this fieldset, add three checkbox inputs with labels for Reading, Sports, and Music. Each checkbox must have a unique id and the name attribute hobbies. Make sure each label's for attribute matches the input's id.
HTML
Hint

Checkboxes allow multiple selections, so each input should have the same name but unique id.

3
Add a submit button to the form
Add a <button> element of type submit below the two fieldsets inside the <form>. The button text should be Submit Survey.
HTML
Hint

The submit button should be inside the form but outside the fieldsets.

4
Make the form accessible and user-friendly
Add aria-label attributes to the <form> and the submit <button>. Set the form's aria-label to Fruit and hobbies survey form and the button's aria-label to Submit your survey answers. Also, add a tabindex="0" attribute to the submit button to ensure it is keyboard accessible.
HTML
Hint

Use aria-label to describe the form and button for screen readers. The tabindex="0" makes the button focusable by keyboard.

Practice

(1/5)
1. Which input type allows a user to select only one option from a group?
<input type="?">
easy
A. button
B. checkbox
C. radio
D. text

Solution

  1. Step 1: Understand input types

    The radio input type is designed for selecting one option from many.

  2. Step 2: Compare with other types

    checkbox allows multiple selections, text is for typing, and button triggers actions.

  3. Final Answer:

    radio -> Option C

  4. Quick Check:

    Single choice = radio [OK]
Hint: Radio = one choice, Checkbox = many choices [OK]
Common Mistakes:
  • Confusing checkbox with radio
  • Thinking text input allows selection
  • Using button for selection
2. Which of the following is the correct syntax to create a checkbox with label "Subscribe"?
easy
A. Subscribe
B. Subscribe
C. Subscribe
D. Subscribe

Solution

  1. Step 1: Check input and label usage

    The correct checkbox uses <input type="checkbox"> and a <label> with matching for attribute.

  2. Step 2: Identify invalid syntax

    The other options use invalid syntax: A uses a non-existent <checkbox> tag, B incorrectly closes the input with text inside, and D uses an invalid checkbox attribute.

  3. Final Answer:

    <input type="checkbox" id="sub"><label for="sub">Subscribe</label> -> Option B

  4. Quick Check:

    Checkbox + label with for = correct syntax [OK]
Hint: Use with [OK]
Common Mistakes:
  • Using non-existent <checkbox> tag
  • Missing type attribute
  • Not linking label with for attribute
3. What will be the result when this HTML is rendered?
<form>
  <input type="radio" name="color" id="red" value="Red"><label for="red">Red</label>
  <input type="radio" name="color" id="blue" value="Blue" checked><label for="blue">Blue</label>
  <input type="radio" name="color" id="green" value="Green"><label for="green">Green</label>
</form>
medium
A. Only the Blue radio button is selected by default
B. All three radio buttons are selected
C. No radio buttons are selected by default
D. The Green radio button is selected by default

Solution

  1. Step 1: Identify checked attribute

    The Blue radio button has the checked attribute, so it is selected by default.

  2. Step 2: Understand radio group behavior

    Only one radio button in a group (same name) can be selected at a time.

  3. Final Answer:

    Only the Blue radio button is selected by default -> Option A

  4. Quick Check:

    Checked attribute sets default selection [OK]
Hint: Look for checked attribute to find default selected radio [OK]
Common Mistakes:
  • Assuming multiple radios can be selected
  • Ignoring the checked attribute
  • Confusing radio with checkbox behavior
4. This code snippet is intended to create two checkboxes with labels, but only one label works correctly. What is the error?
<input type="checkbox" id="news"><label for="news">News</label>
<input type="checkbox" id="updates"><label>Updates</label>
medium
A. The second label is missing the for attribute linking it to the checkbox
B. The first checkbox is missing a name attribute
C. Checkboxes cannot have labels
D. The id attribute should be on the label, not the input

Solution

  1. Step 1: Check label associations

    The first label uses for="news" linking it to the checkbox with id "news".

  2. Step 2: Identify missing for attribute

    The second label lacks a for attribute, so it is not linked to the checkbox with id "updates".

  3. Final Answer:

    The second label is missing the for attribute linking it to the checkbox -> Option A

  4. Quick Check:

    Label needs for attribute to link input [OK]
Hint: Labels must have for attribute matching input id [OK]
Common Mistakes:
  • Assuming name attribute is required for labels
  • Thinking labels can't be used with checkboxes
  • Placing id on label instead of input
5. You want to create a form where users can select their favorite fruits. They can pick any number of fruits, but only one fruit size (Small, Medium, Large). Which input types should you use for fruits and sizes respectively?
hard
A. Radio buttons for both fruits and sizes
B. Radio buttons for fruits, Checkboxes for sizes
C. Checkboxes for both fruits and sizes
D. Checkboxes for fruits, Radio buttons for sizes

Solution

  1. Step 1: Understand selection rules

    Users can pick multiple fruits, so checkboxes are suitable for fruits.

  2. Step 2: Single choice for size

    Only one size can be selected, so radio buttons are suitable for sizes.

  3. Final Answer:

    Checkboxes for fruits, Radio buttons for sizes -> Option D

  4. Quick Check:

    Multiple choice = checkbox, single choice = radio [OK]
Hint: Multiple selections use checkbox; single selection uses radio [OK]
Common Mistakes:
  • Using radio buttons for multiple selections
  • Using checkboxes for single selection
  • Not grouping radio buttons by name
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard