HTML Checkboxes & Radio Buttons

Master the essential form elements for letting users make single or multiple selections on your website.

📝

Welcome! Let's learn how to gather user choices using checkboxes and radio buttons.

/* Let's begin the form lesson... */

Checkboxes: For Multiple Selections

Checkboxes are used when you want to allow a user to select one or more options from a set of choices. Each checkbox works independently, so a user can check as many boxes as they like. They are defined with <input type="checkbox">.

Radio Buttons: For a Single Choice

Radio buttons are for situations where a user must select only one option from a group. To group them, all radio buttons in the set must share the exact same name attribute. This is what tells the browser they are linked. They are defined with <input type="radio">.

Key Attributes and Purpose

Both are crucial for forms. Key attributes include type (checkbox/radio), name (to group inputs for submission), value (the data sent to the server), and checked (to make an option selected by default).

Practice Zone

Interactive Test 1: Build the Inputs

Drag the correct `type` and `name` attributes to build a set of checkboxes and a set of radio buttons.

Arrastra en el orden correspondiente.


Arrastra las opciones:

name="toppings"
type="checkbox" name="toppings"
type="radio"
type="radio"

Completa el código:

<input ______ name='color' value='blue'>
<input ______ value='lettuce'>
<input type='checkbox' ______ value='tomato'>
<input ______ name='color' value='red'>
Unlock with Premium

Interactive Test 2: Complete the Form

Rellena los huecos en cada casilla.

<p>Choose a size:</p>
<input type="" name="size" value="S">
<input type="radio" name="size" value="M" >

<p>Choose extras:</p>
<input type="checkbox" name="extra" >
<input type="checkbox" name="extra" value="cheese">
Unlock with Premium

Practice Example: Code Editor

Create a form that asks for a delivery preference (radio buttons: Standard, Express) and add-ons (checkboxes: Gift Wrap, Insurance).

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<form> <p>Delivery:</p> <input type="radio" id="std" name="delivery" value="standard"> <label for="std">Standard</label><br> <input type="radio" id="exp" name="delivery" value="express"> <label for="exp">Express</label><br> <p>Add-ons:</p> <input type="checkbox" id="gw" name="addon1" value="wrap"> <label for="gw">Gift Wrap</label><br> <input type="checkbox" id="ins" name="addon2" value="insurance"> <label for="ins">Insurance</label><br> </form>
Unlock with Premium

Knowledge Check

To ensure a user can only select ONE radio button from a group, what must they all share?


Unlock with Premium

Bringing Your Form to Life

Checkboxes and radio buttons are the building blocks of forms. To make them truly useful, you need to connect them with labels for accessibility and understand how their data is sent to a server.

1. The <label> Tag: A User's Best Friend

Always wrap your inputs with a <label>. By connecting the label to the input using the for and id attributes, you create a larger clickable area and make your form accessible to screen readers.

<label for="subscribe">Subscribe</label>
<input type="checkbox" id="subscribe">

2. The <form> Element and Submission

To send data to a server, your inputs must be inside a <form> tag. The form's action attribute specifies the URL to send the data to, and method defines how (usually "POST").

<form action="/submit" method="post">
  
  <button type="submit">Send</button>
</form>

3. How Data is Sent

When a user submits the form, the browser packages the name and value of each selected input. For `size="L"`, the server would receive `size=L`. For multiple checkboxes with the same name, it might receive `toppings=tomato&toppings=cheese`.

// Data sent to server:
'size=L&toppings=cheese'
Practical Takeaway: A good form uses labels for accessibility, groups inputs with a shared name, and defines a clear value for each option to ensure data is collected cleanly.

Form Input Glossary

<input>
The fundamental element for creating interactive controls for web-based forms to accept data from the user.
type="checkbox"
An attribute value for <input> that creates a checkbox, allowing for multiple selections in a group.
type="radio"
An attribute value for <input> that creates a radio button. When multiple radio buttons share the same `name`, only one can be selected.
name
A crucial attribute that groups inputs together. For radio buttons, it creates a single-choice group. For all inputs, it's used as the key for the data sent on form submission.
value
Specifies the data that is sent to the server when the form is submitted with this option selected.
checked
A boolean attribute that, when present, makes the checkbox or radio button selected by default when the page loads.
<label>
Represents a caption for an item in a user interface. Essential for accessibility.
for
An attribute on a <label> that explicitly links it to an <input> by matching the input's `id`. Clicking the label will then focus or activate the input.