freecoding.school100% FREE · NO SIGNUP
Input HarborISSUE #12 of 46

labels · for · id · accessibility

FormaVSCaptain Invalid Input
Forma saysA <label> names a control and, when linked, makes the text itself clickable — a core accessibility requirement.

Connect a label two ways: wrap the control (<label>Name <input></label>) or link by id (<label for="nm"> + <input id="nm">). Either way, clicking the label focuses or toggles the control — a bigger, friendlier hit target.

Labels are not optional polish: screen readers announce them so users know what each field is. Every input, select, and textarea should have one.

Power-ups you unlock

Captain Invalid Input attacks — common mistakes

Boss battleLabel one input by wrapping and another via for/id. Click each label and confirm the control focuses.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <p><label>wrapped <input name="a"></label></p>
    <p><label for="b">linked</label> <input id="b" name="b"></p>
    <p><label><input type="checkbox"> click my text to toggle</label></p>
  </form>
</body></html>
▶ Open the interactive comic issue
‹ Fieldset · Legend · Grouping InputsSelect · Option · Optgroup · Datalist ›