Radio buttons and checkboxes in HTML

Introduction

Radio buttons and checkboxes let users pick options on a form. They help collect choices easily.

When you want the user to select only one option from a list (use radio buttons).

When you want the user to select multiple options from a list (use checkboxes).

When creating surveys or quizzes that need user answers.

When asking users to agree to terms or select preferences.

When building forms for sign-ups or settings.

Syntax

HTML

<input type="radio" name="group1" value="option1"> Option 1
<input type="checkbox" name="check1" value="optionA"> Option A

Radio buttons with the same name belong to one group; only one can be selected.

Checkboxes work independently; users can select many or none.

Examples

Two radio buttons in the same group named "color". User can pick only one color.

HTML

<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="blue"> Blue

Two checkboxes named "fruit". User can pick one, both, or none.

HTML

<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana

Radio buttons with one pre-selected option using checked.

HTML

<input type="radio" name="size" value="small" checked> Small
<input type="radio" name="size" value="large"> Large

A single checkbox that is checked by default.

HTML

<input type="checkbox" name="subscribe" value="yes" checked> Subscribe to newsletter

Sample Program

This page shows a form with two groups: one for picking a single favorite color using radio buttons, and one for selecting multiple hobbies using checkboxes. Labels make it easy to click the option text. The form is accessible and responsive.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio and Checkbox Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      max-width: 400px;
      margin: auto;
    }
    fieldset {
      margin-bottom: 1.5rem;
      border: 1px solid #ccc;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    legend {
      font-weight: bold;
      padding: 0 0.5rem;
    }
    label {
      display: block;
      margin-bottom: 0.5rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <main>
    <form aria-label="Favorite options form">
      <fieldset>
        <legend>Choose your favorite color</legend>
        <label><input type="radio" name="color" value="red"> Red</label>
        <label><input type="radio" name="color" value="green"> Green</label>
        <label><input type="radio" name="color" value="blue"> Blue</label>
      </fieldset>

      <fieldset>
        <legend>Select your hobbies</legend>
        <label><input type="checkbox" name="hobby" value="reading"> Reading</label>
        <label><input type="checkbox" name="hobby" value="sports"> Sports</label>
        <label><input type="checkbox" name="hobby" value="music"> Music</label>
      </fieldset>

      <button type="submit">Submit</button>
    </form>
  </main>
</body>
</html>

Important Notes

Always use <label> tags with inputs for better accessibility and easier clicking.

Use the same name attribute for radio buttons in one group to link them.

Checkboxes can have the same or different name depending on how you want to collect data.

Summary

Radio buttons let users pick only one option from a group.

Checkboxes let users pick any number of options, including none.

Labels improve usability and accessibility for both controls.

Practice

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