Labels in action
Click the words in the preview yourself: "Email" focuses the box, the newsletter text ticks the box, "Phone" does nothing.
A <label> ties visible text to a control so everyone knows what it's for and can click the text to use it; a <fieldset> with a <legend> groups related controls under one shared caption.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a login form with properly labelled username and password fields, using for/id.
Group two radio-style questions: a fieldset with the legend Contact me by, containing labelled checkboxes for Email and SMS.
Explain it without notes
What are the two ways to connect a label to a control, and what does each need?
Why do labels matter for accessibility and for usability?
When should you use a fieldset and legend?
What does disabled on a fieldset do?
Preview
Console
Nothing logged yet.Expected console output
email has 1 label: Email
phone has 0 labels
Focused after clicking the label: email
Checkbox ticked by clicking its text: true