📝 Phase 8 · Forms🟢 BeginnerMODULE 30
Checkboxes
Course progress86%
🎯 What you'll learn: The
checked state, how checkbox value works, and grouping multiple checkboxes for a "select any that apply" list.
Section 1
Basic Checkbox
type="checkbox" creates an independent on/off toggle. Unlike radio buttons (next lesson), any number of checkboxes in a group can be checked at once.
checkbox-basic.html
HTML
<input type="checkbox" id="terms" name="terms"> <label for="terms">I agree to the terms</label>
Section 2
checked & value
The checked attribute pre-selects a box on page load. The value attribute is what gets sent to the server if checked — if omitted, it defaults to the string "on".
checkbox-value.html
HTML
<input type="checkbox" id="newsletter" name="newsletter" value="subscribed" checked> <label for="newsletter">Subscribe to newsletter</label> <!-- If left checked and submitted: newsletter=subscribed -->
💡
Unchecked boxes aren't sent at all
An unchecked checkbox doesn't appear in the submitted form data at all — not as false, not as empty. Your server-side code needs to treat "field missing" as "unchecked."
Section 3
Grouping Checkboxes — Select Any That Apply
Give each checkbox in a group the same name with square brackets, or the same name and let the server collect multiple values — this is how "select all that apply" lists work.
checkbox-group.html
HTML
<fieldset> <legend>Which subjects interest you?</legend> <input type="checkbox" id="math" name="subjects" value="math"> <label for="math">Math</label> <input type="checkbox" id="science" name="subjects" value="science"> <label for="science">Science</label> </fieldset>
Section 4
Checkbox vs. Radio — Preview
| Input | Behavior |
|---|---|
| Checkbox | Independent — any number can be checked in a group |
| Radio (next lesson) | Mutually exclusive — only one per group can be selected |
🧩 Knowledge Check — Lesson 30
5 questions to test your checkbox knowledge.
1. Can multiple checkboxes in the same group be checked at once?
2. What does the checked attribute do?
3. What happens to an unchecked checkbox on form submission?
4. What value is sent if a checked checkbox has no value attribute?
5. How do you group checkboxes for a "select all that apply" list?
Coding Challenge — Lesson 30
Apply what you learned · Beginner Level
Challenge: Build an Interests Checklist
Build a fieldset "Select Your Interests" with 4 checkboxes (Coding, Design, Music, Sports), all sharing the same name with distinct values, plus a separate "I agree to the terms" checkbox with checked pre-set.
Build a fieldset "Select Your Interests" with 4 checkboxes (Coding, Design, Music, Sports), all sharing the same name with distinct values, plus a separate "I agree to the terms" checkbox with checked pre-set.
💡 Show hints if you're stuck
- Each interest checkbox:
name="interests" value="coding"etc.
Finished this lesson?
Mark it complete to track your progress.
Module 30 of 62Phase 8 — Forms