HTML: input pattern

The pattern attribute validates an input value against a regular expression when the form is submitted.

What you will learn

How to define a simple input pattern
How pattern works with required and type
How to make a validation error understandable

Phone number example

<label for="phone">Phone number</label>
<input id="phone" name="phone" inputmode="numeric"
  pattern="[0-9]{10,11}"
  title="Enter 10 or 11 digits">

The value must match the pattern when it is not empty. The title can provide a hint for the browser’s validation message, but a visible instruction is better for all users.

Combine constraints

Use required when an empty value is not allowed. Use an appropriate type, such as email, for standard formats. These constraints complement each other; one does not replace the others.

Common mistakes

Explain the accepted format before the user submits the form.
Do not use a complex expression when a simpler input type or constraint is enough.
Browser validation improves usability but does not replace server-side validation.