Checkboxes — Complete Guide
Checkboxes — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 26 of 100
Checkboxes
Basics ✓ → Forms & semantics → APIs & performance → Projects
Forms & semantics · 2 — Forms, SEO, a11y · ~6 min · HTML — Forms & Validation
What is this?
Checkboxes let users select zero or more independent options; each checked box submits its value.
Why should you care?
MarkupVerse notification prefs and terms acceptance use checkboxes.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<fieldset>
<legend>Alerts</legend>
<label><input type="checkbox" name="alerts" value="email" checked> Email</label>
<label><input type="checkbox" name="alerts" value="sms"> SMS</label>
<label><input type="checkbox" name="alerts" value="push"> Push</label>
</fieldset>
<label><input type="checkbox" name="terms" value="yes" required> I agree to the terms</label>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Same name with different values can submit as multiple values.
- required on terms is common.
- Don’t use radios for multi-select.
Practice next
- Build alerts fieldset.
- Add required terms.
- Submit and inspect values.
- Pre-check email only.
- Add indeterminate via JS later.
Remember
Independent options. value when checked. required for legal.
MarkupVerse alert prefs
Users pick email/SMS/push.
Outcome: Multiple values post correctly.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
