HTML Forms — Validation & Accessibility

Also Known As

TL;DR

Explanation

HTML5 input types give free validation and mobile-optimised keyboards: email, tel, number, date, url, color. Constraint validation attributes: required, minlength, maxlength, pattern (regex), min, max, step. The browser validates on submit and shows native UI unless novalidate is added. For custom validation, use the Constraint Validation API: input.setCustomValidity('message'). Accessibility: always associate <label> with input via for/id or wrapping; use aria-describedby for hint text; aria-invalid='true' on failed fields; aria-live='polite' on error containers. Never rely solely on placeholder — it disappears on focus and has poor contrast. Server-side validation (PHP) is mandatory regardless of client validation — never trust the client.

Common Misconception

Why It Matters

Common Mistakes

• Input without a label — placeholder is not a substitute; it disappears when the user types.
• Not using the correct input type (email, tel, number) — loses browser-native validation and mobile keyboard.
• Form submission via JavaScript without a fallback for disabled JS users.
• Not using autocomplete attributes — browsers cannot autofill correctly without them.

Code Examples

<input type="text" placeholder="Enter your email">
<input type="text" id="pass">

<!-- Label association, correct input type, built-in validation -->
<label for="email">Email address</label>
<input
  type="email"
  id="email"
  name="email"
  required
  autocomplete="email"
  aria-describedby="email-hint"
>
<span id="email-hint">We'll never share your email</span>

<!-- Password with show/hide -->
<label for="password">Password</label>
<input type="password" id="password" name="password"
  required minlength="8" autocomplete="current-password">

Tags

🧠 Logic Engine

References

• https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation