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

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.

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

  
    What is your favorite fruit?
    
  

Need a 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

  
    What is your favorite fruit?
    
    Apple
    
    Banana
    
    Cherry
  
  

Need a 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

  
    What is your favorite fruit?
    
    Apple
    
    Banana
    
    Cherry
  
  
    Which hobbies do you enjoy?
    
    Reading
    
    Sports
    
    Music
  
  

Need a 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

  
  
    What is your favorite fruit?
    
    Apple
    
    Banana
    
    Cherry
  
  
    Which hobbies do you enjoy?
    
    Reading
    
    Sports
    
    Music
  
  Submit Survey

Need a hint?

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