Built-in HTML Form Validation Attributes

Before writing a single line of JavaScript, HTML alone can enforce many validation rules using attributes.

<form>
  <input type="text" name="username" required minlength="3" maxlength="20">
  <input type="email" name="email" required>
  <input type="number" name="age" min="13" max="120">
  <input type="text" name="zip" pattern="[0-9]{4}" title="4-digit postal code">
  <input type="url" name="website">
  <button type="submit">Sign Up</button>
</form>

required — the browser blocks submission until the field has a value, showing a built-in error tooltip.
minlength / maxlength — restrict text length.
min / max — restrict numeric or date ranges.
pattern — a regular expression the value must match (here, exactly 4 digits). The title attribute's text is shown in the browser's default validation message.
type="email" and type="url" automatically check for basic valid formatting (an @ and domain for email, a valid URL structure for url).

This validation happens entirely in the browser before the form is even submitted — no server round-trip needed. However, client-side validation is a convenience, not a security measure: it can be bypassed by disabling JavaScript or sending requests directly. Always re-validate every field on the server too.