Lesson 21 +10 XP

Form Validation

Validation checks that what the visitor typed is good before the form is sent. HTML can do a lot of this by itself!

Makes a field mandatory. The browser refuses to submit until it's filled.

<input type="text" name="name" required>

Control how many characters are allowed.

<input type="password" name="pw" minlength="8" maxlength="64">

For numbers, dates, ranges: the allowed lowest and highest values.

<input type="number" name="age" min="1" max="120">

A "regular expression": a pattern the text must match. This example requires 5 digits:

<input type="text" name="zip" pattern="[0-9]{5}" title="5 digit zip code">

title explains what's expected if the pattern fails.

The allowed jump between values (for numbers and ranges).

<input type="number" name="rating" min="0" max="5" step="0.5">

Tells the phone which keyboard to show (like numeric or email), even for text inputs.

<input type="text" name="card" inputmode="numeric">

Grey hint text that disappears when typing.

<input type="text" name="code" placeholder="e.g. ABC-123">

Lets the browser fill fields from saved info.

<input type="email" name="email" autocomplete="email">

Common values: name, email, username, current-password, new-password, tel, url.

Shows the value but the visitor can't change it. It still gets sent.

<input type="text" name="code" value="FIXED" readonly>

Grayed out and NOT sent with the form.

<input type="text" name="temp" disabled>

Lets the field accept several values (emails, files, options).

Browsers also give JavaScript tools (like setCustomValidity()) for custom checks. HTML handles the common cases: JS handles the fancy ones.

required, pattern, min/max, minlength/maxlength, step validate input.
placeholder hints, autocomplete fills.
readonly shows-but-locks; disabled turns off and hides from submission.
multiple allows several values.
inputmode picks the phone keyboard.