Goal
You’ll be able to build a basic, properly labeled form, and understand why connecting a label to its input correctly is genuinely important, not just a formatting nicety.
Learn
The <form> element wraps a set of inputs that collect user data:
<form> <label for="email">Email Address</label> <input type="email" id="email" name="email"> </form>
Three things are happening here, all essential: the <label> provides a visible, readable description of what the input is for; the <input> is the actual field the user interacts with; and critically, the label’s for attribute matches the input’s id attribute, creating a real, programmatic connection between them, not just visual proximity on the page.
This connection matters for two concrete reasons. First, clicking the label text itself will focus or activate the connected input (try clicking a checkbox’s label text, not just the checkbox itself — this works because of the for/id connection). Second, and more importantly, screen readers announce the label text when a user focuses that input, so a visually-sighted developer placing text “near” an input without this connection creates a completely unlabeled, confusing experience for a screen reader user, even though it looks correctly labeled visually.
The name attribute is what actually gets sent to the server when the form is submitted — without it, that field’s value is simply not included in the submission at all, silently.
Decision Task
A developer places a <label> with the text “Phone Number” directly above an <input>, positioned visually close together, but doesn’t add a for attribute or matching id. Before reading on: does this create a properly labeled input for accessibility purposes?
Show Answer
No — visual proximity alone creates no real programmatic connection. A screen reader has no way to know that label belongs to that specific input without the matching for/id attributes; it may announce the input with no label at all, or an ambiguous one, even though it looks correctly labeled to a sighted user.
Common Mistake
Adding a name attribute but forgetting the matching for/id connection between label and input, assuming visual placement is sufficient. The input will still technically submit correctly (since that depends on name, not the label connection), but it creates a genuinely inaccessible, confusing experience for screen reader users, who rely entirely on that explicit programmatic connection, not visual layout.
Practice Questions
1. Write a properly connected label and input pair for a “Full Name” text field.
Show Answer
<label for="fullname">Full Name</label><input type="text" id="fullname" name="fullname">
2. What specifically connects a label to its input, and why does visual placement alone not achieve this?
Show Answer
The label’s for attribute matching the input’s id attribute; visual placement is only a sighted-user convenience with no programmatic meaning a screen reader can detect.
3. What happens to a form field’s value on submission if the input is missing a name attribute?
Show Answer
It’s silently excluded from the submitted data entirely — name is what identifies the field’s value in the submission, independent of the label connection.
4. True or False: clicking anywhere on a properly connected label’s text will focus or activate its associated input.
Show Answer
True — this is a direct, practical benefit of the for/id connection, useful for all users, not just screen reader users.
5. Why might a developer’s form “look” correctly labeled to them, while still being genuinely broken for accessibility?
Show Answer
Because visual/spatial labeling is obvious to a sighted developer testing by eye, but the actual programmatic for/id connection screen readers depend on is invisible and easy to forget, since nothing about the visual appearance reveals whether it’s present.
Try It Yourself
Without looking back, write a label and input pair for a “Message” field, using id=”msg” and name=”message” — matching the label’s for attribute correctly to the input’s id.
Show Answer
<label for="msg">Message</label><input type="text" id="msg" name="message"> — note id and for must match exactly (“msg”), while name can be a different value used purely for submission (“message”).
Quick Check
1. What attribute connects a label to a specific input?
Show Answer
The label’s for attribute, matching the input’s id attribute.
2. What attribute determines what gets sent to the server on submission?
Show Answer
name
3. Why is visual proximity between a label and input not sufficient for real accessibility?
Show Answer
It creates no programmatic connection a screen reader can detect; only the matching for/id attributes do.
4. What happens if an input has no name attribute at all?
Show Answer
Its value is silently excluded from the form’s submitted data.
5. Name one practical, non-accessibility-specific benefit of a correctly connected label.
Show Answer
Clicking the label text itself focuses or activates the connected input, useful for all users including on small touch targets.