Unlike radio buttons, checkboxes are **independent** of each other — checking one doesn't affect any others, even if they share the same `name`. Multiple checkboxes sharing a name (often written as `name="toppings[]"` on the server side) let a user select any number of options from a list, and the form submits a value for each one that's checked. A checkbox's `checked` state is what determines whether it's included in the submission at all — an unchecked box submits nothing for that name.
1Understanding Checkboxes
Unlike radio buttons, checkboxes are independent of each other — checking one doesn't affect any others, even if they share the same name. Multiple checkboxes sharing a name (often written as name="toppings[]" on the server side) let a user select any number of options from a list, and the form submits a value for each one that's checked. A checkbox's checked state is what determines whether it's included in the submission at all — an unchecked box submits nothing for that name.
An unchecked checkbox contributes NOTHING to the submitted form data — not even an empty value — so server-side code must treat 'field absent' as equivalent to false/unchecked, not throw an error.
<label><input type="checkbox" name="terms" required> I agree to the terms</label>2Practical Example
Here is a real-world application of Checkboxes showing how it is used in production HTML.
<!-- Multiple independent checkboxes for a 'select any' list -->
<label><input type="checkbox" name="toppings" value="cheese"> Cheese</label>
<label><input type="checkbox" name="toppings" value="pepperoni" checked> Pepperoni</label>3Best Practices
Follow these guidelines when working with Checkboxes:
1. Use checkboxes for independent yes/no toggles, or for 'select any number' from a list
2. Use the checked attribute to set a sensible default state
3. Remember unchecked boxes are omitted entirely from submitted data — don't assume they'll arrive as false
Tip: An unchecked checkbox contributes NOTHING to the submitted form data — not even an empty value — so server-side code must treat 'field absent' as equivalent to false/unchecked, not throw an error.
<label><input type="checkbox" name="terms" required> I agree to the terms</label>