Built-in Form Validation Attributes

9 min read

HTML5 Validation Without JavaScript

HTML5 provides several attributes that trigger native browser validation before a form is submitted. This gives users immediate feedback without writing a single line of JavaScript.

html

<form>
  <!-- Required field -->
  <input type="text" name="username" required />

  <!-- Min and max for numbers -->
  <input type="number" name="age" min="18" max="99" required />

  <!-- Min and max for date -->
  <input type="date" name="checkin" min="2026-01-01" max="2026-12-31" />

  <!-- Min and max length for text -->
  <input type="text" name="bio" minlength="10" maxlength="200" />

  <!-- Custom pattern (regex) -->
  <input
    type="text"
    name="postcode"
    pattern="[A-Z]{2}[0-9]{1,2} [0-9][A-Z]{2}"
    title="Enter a valid UK postcode, e.g. SW1A 1AA"
  />

  <button type="submit">Register</button>
</form>

required — Field must not be empty.
min / max — Numeric or date bounds.
minlength / maxlength — Character count bounds for text inputs.
pattern — A regular expression the value must match.
title — The error message shown when pattern fails.

HTML validation is a convenience for users, not a security measure. Always validate on the server side as well. A malicious user can bypass client-side validation by editing the HTML or sending raw HTTP requests.

Ready to test yourself?

Practice HTML— quiz & coding exercises