Accessible forms
Ask for input with clear labels.
Every input needs a name
Associate a visible label with an input by matching the label for attribute to the input id. A placeholder disappears when someone types, so it is not a replacement for a label.
Use the right input type
type="email" gives the browser email-specific validation and can influence the mobile keyboard. required asks the browser to reject an empty value during normal form submission.
Validation has limits
Browser validation helps people correct mistakes. A real service must also validate input on the server. This example prevents submission and displays a local confirmation; it does not subscribe anyone.
Try the example
<h1>Stay curious.</h1>
<form>
<label for="email">Email address</label><br>
<input id="email" name="email" type="email" required autocomplete="email">
<button type="submit">Try validation</button>
</form>
<p id="status" role="status"></p>
<script>
document.querySelector("form").addEventListener("submit", (event) => {
event.preventDefault();
document.querySelector("#status").textContent = "Valid format. This demo sends nothing.";
});
</script>Enable JavaScript to edit and run the example in the playground.
Your turn
Try an empty value, an invalid email, and a valid email. Observe the difference.
Check your understanding
What connects a label to a specific input?
- Matching for and id values
- Matching text colors
- A placeholder
Show answer and explanation
Matching for and id values. The label for value matches the input id. This gives the input an accessible name.