Forms & Validation Snippets — Free HTML CSS JS Form Input & Validation Examples

Forms are where users commit — signing up, paying, configuring — so friction here costs more than anywhere else in a product. These snippets cover the input patterns that reduce it: floating labels, auto-advancing OTP fields, card inputs that format as you type, password strength that scores honestly, tag inputs, file dropzones, and multi-step flows that validate per step.

Validation is inline and specific throughout: the message says what is wrong and where, sits next to the field, and is announced to assistive technology rather than only shown in colour.

Validate at the right moment, not the earliest one

Marking a field invalid the instant a user starts typing reads as hostile — it tells someone they are wrong before they have finished answering. Every validated field here checks on blur for its first pass, then switches to live, on-input checking only once it has already been marked invalid once, so a correction is confirmed immediately without punishing someone mid-keystroke on their first attempt.

Building on the constraint validation API, not replacing it

HTML's own required, type, pattern and min/max attributes give real validation and browser-native behaviour — including mobile keyboard hints — for free, with no script. These snippets use that as the actual validation layer and override only the default error bubble's appearance, via setCustomValidity or by reading the input's validity state directly, which keeps the semantics native while the visual design stays fully custom.

Errors need three properties to be accessible

A message tied to its field with aria-describedby, an aria-invalid="true" on the input itself, and the message text present in the DOM rather than conveyed through colour alone — all three matter, because a red border alone is invisible to a screen reader and ambiguous to anyone with a colour vision deficiency. Every inline-validation snippet in this tag implements all three together rather than any one in isolation.

Interaction detail is where these components earn their keep

An OTP input's paste-to-fill splitting one clipboard read across every box, a credit-card field auto-formatting with a live Luhn check as digits are typed, and a password meter scoring real entropy rather than checking boxes for a symbol — each of these is a small mechanical detail, and each is disproportionately responsible for whether the surrounding form feels considered or generic.