Patterns and custom messages in HTML

A regular expression on the field, checked before anything is sent.

<label for="sku">Product code</label>
<input type="text" id="sku" name="sku"
       pattern="[A-Z]{2}-[0-9]{3}"
       title="Two letters, a hyphen, three digits"
       placeholder="TS-001" required>

<label for="pin">PIN</label>
<input type="text" id="pin" name="pin" pattern="[0-9]{4}"
       inputmode="numeric" autocomplete="one-time-code"
       title="Four digits">

How it works

1. pattern must match the whole value; no anchors are needed.
2. title is what the browser shows when the pattern fails.
3. inputmode picks the on-screen keyboard without changing validation.

The run, in numbers

Lines

10

Characters to type

337

Tokens

68

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 54 seconds.

Type this snippet

Step 2 of 5 in Validation & submission, step 20 of 25 in Forms & inputs.

← Previous Next →