Lesson 4 of 12
Structured learning draftCreate an accessible contact form
Forms are conversations. Labels explain the requested data, native controls provide keyboard behavior, and errors must identify both the problem and the correction. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Associate every control with a persistent label.
- Group related choices with fieldset and legend.
- Use native input types and understandable validation.
Create an accessible contact form
Create an accessible contact form: label to fieldset to validation.
Associate every control with a persistent label.
Group related choices with fieldset and legend.
Use native input types and understandable validation.
<form action="/contact" method="post">
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="brief">Project brief <span>(maximum 500 characters)</span></label>
<textarea id="brief" name="brief" maxlength="500" required></textarea>
<button type="submit">Send project enquiry</button>
</form>Placeholder text is not a replacement for a label because it disappears during entry. The name attribute supplies the submitted key. Appropriate input types and autocomplete tokens improve mobile keyboards and completion. Native validation is a baseline; server-side validation remains required.
Test without a mouse
- Tab through every control in a logical order.
- Activate the submit button with the keyboard.
- Submit empty and malformed values.
- Confirm each error identifies the field and correction.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Using placeholder as the only label.
- Removing focus outlines.
- Trusting client validation as a security boundary.
Practice activity
Apply the lesson
Build and keyboard-test a contact form with name, email, project type and brief fields. Record the empty, invalid-email and successful states. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
Which attribute makes an input value available under a key during form submission?
Lesson summary
- Labels and native controls provide robust interaction.
- Errors must be perceivable and actionable.
- Validate again on the server before trusting input.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note