LESSON 74 OF 120

Repair: a consent checkbox

Build a required checkbox with a clear label.

Official sourceWHATWG HTML — checkboxReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Build a required checkbox with a clear label. Semantic structure should describe meaning, not visual appearance.

Correct example
<form><label for="terms"><input id="terms" type="checkbox" name="terms" required> I accept the terms</label></form>

A checkbox represents a positive or negative choice. required demands selection before submission, name identifies the consent, and the label keeps its explanatory text accessible and clickable.

Common mistake
<form><input type="checkbox" name="terms"> Accept</form>

The text sits beside the checkbox but is not a label. The id and required attributes are missing, so the consent is neither connected nor mandatory.

STEP 2 · APPLY

Your exercise

Repair the example without changing its purpose. Build a required checkbox with a clear label.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The checkbox has id, name and required.
  • The checkbox has a connected label.
Explain the solution logic

Add id="terms" and required to the input, then wrap the control and complete text in a connected label.