TaskBuild a 'features I want' checkbox group: three checkboxes with same name='features' and values 'dark_mode', 'notifications', 'autosave'. Pre-check dark_mode. Each has a label.
<input type=checkbox>: single and grouped
75 XP7 min
Theory
Two checkbox patterns
Single β boolean opt-in:
<input type="checkbox" id="tos" name="accepted_tos" value="yes" required /> <label for="tos">I agree to the terms</label>
If checked: submits accepted_tos=yes. If unchecked: nothing is submitted at all (the key just doesn't appear in the body). required forces the user to check.
Group β multi-select:
<input type="checkbox" id="py" name="languages" value="python" /> <label for="py">Python</label> <input type="checkbox" id="js" name="languages" value="javascript" /> <label for="js">JavaScript</label> <input type="checkbox" id="go" name="languages" value="go" /> <label for="go">Go</label>
Same name, different value. Submitted as: languages=python&languages=javascript (if first two checked).
FastAPI receives a list
async def submit(languages: list[str] = Form([])):
return {"langs": languages} # ["python", "javascript"]The empty list [] default is critical β if zero boxes checked, the key isn't in the body at all and FastAPI errors out without a default.
checked attribute
Pre-check on first render:
<input type="checkbox" name="newsletter" value="yes" checked />
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.