HTML pattern Attribute

The pattern attribute is used to validate user input against a specific format using Regular Expressions (Regex).

It helps ensure users enter data in the correct format before the form is submitted.

For example, you can require users to enter a 10-digit mobile number, a username with specific rules, or a PIN code with a fixed number of digits.

What is the pattern Attribute?

The pattern attribute allows developers to define a rule that an input value must match before form submission.

If the entered value does not match the specified pattern, the browser automatically displays a validation message.

This validation happens directly in the browser without requiring JavaScript.

Browser Support

The HTML pattern attribute became widely supported around 2012 and is now supported by all major modern browsers including Chrome, Edge, Firefox, Safari, Android browsers, and iPhone browsers.

Because browser support is excellent, the pattern attribute is commonly used in modern web forms.

Why Most Developers Underestimate pattern

Many developers think the pattern attribute exists only for validation.

In reality, it improves the overall user experience, reduces invalid submissions, and helps create cleaner forms.

How pattern Works

The browser checks the entered value against the specified regular expression.

If the value matches the pattern, the form can be submitted.

If the value does not match, submission is blocked and the browser shows an error message.

Simple Example

10 Digit Mobile Number Validation

The following pattern is commonly used to validate Indian mobile numbers that contain exactly 10 digits.

[code theme="dark"] [/code] [preview data="eyJodG1sIjoiPGZvcm0gY2xhc3M9XCJtYXgtdy1tZCBteC1hdXRvIHNwYWNlLXktNFwiPlxuXG4gIDxpbnB1dFxuICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICBwYXR0ZXJuPVwiWzAtOV17MTB9XCJcbiAgICByZXF1aXJlZFxuICAgIHBsYWNlaG9sZGVyPVwiOTg3NjU0MzIxMFwiXG4gICAgdGl0bGU9XCJQbGVhc2UgZW50ZXIgZXhhY3RseSAxMCBkaWdpdHNcIlxuICAgIGNsYXNzPVwidy1mdWxsIHJvdW5kZWQtbGcgYm9yZGVyIGJvcmRlci1ncmF5LTMwMCBweC00IHB5LTMgdGV4dC1ncmF5LTcwMCBwbGFjZWhvbGRlci1ncmF5LTQwMCBvdXRsaW5lLW5vbmUgdHJhbnNpdGlvbiBmb2N1czpib3JkZXItYmx1ZS01MDAgZm9jdXM6cmluZy0yIGZvY3VzOnJpbmctYmx1ZS0yMDBcIlxuICA+XG5cbiAgPGJ1dHRvblxuICAgIHR5cGU9XCJzdWJtaXRcIlxuICAgIGNsYXNzPVwicm91bmRlZC1sZyBiZy1ibHVlLTYwMCBweC01IHB5LTMgZm9udC1tZWRpdW0gdGV4dC13aGl0ZSB0cmFuc2l0aW9uIGhvdmVyOmJnLWJsdWUtNzAwXCJcbiAgPlxuICAgIFN1Ym1pdFxuICA8L2J1dHRvbj5cblxuPC9mb3JtPiIsImNzcyI6Ii5teS1idG4ge1xuICBwYWRkaW5nOiAxMHB4IDIwcHg7XG4gIGJhY2tncm91bmQ6ICMxMGI5ODE7XG4gIGNvbG9yOiB3aGl0ZTtcbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn0iLCJqcyI6ImRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIubXktYnRuXCIpLmFkZEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCAoKSA9PiB7XG4gIGFsZXJ0KFwiSGVsbG8gZnJvbSBMaXZlIFByZXZpZXchXCIpO1xufSk7In0="]

Let's understand how this pattern works:

• [0-9] allows any digit from 0 to 9.
• {10} requires exactly 10 digits.
• No letters, spaces, or special characters are allowed.

Because the pattern requires exactly ten numeric characters, the browser will reject shorter or longer values.

Valid examples:

[code theme="dark"] 9876543210 9123456789 7012345678 [/code]

Invalid examples:

[code theme="dark"] 987654321 98765432101 abc1234567 [/code]

Username Validation

This pattern allows usernames that contain letters, numbers, and underscores.

[code theme="dark"] [/code] [preview data="eyJodG1sIjoiPGZvcm0gY2xhc3M9XCJtYXgtdy1tZCBteC1hdXRvIHNwYWNlLXktNFwiPlxuXG4gIDxpbnB1dFxuICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICBwYXR0ZXJuPVwiW2EtekEtWjAtOV9dezMsMTV9XCJcbiAgICByZXF1aXJlZFxuICAgIHBsYWNlaG9sZGVyPVwiam9obl9kb2VcIlxuICAgIHRpdGxlPVwiUGxlYXNlIGVudGVyIGV4YWN0bHkgMTAgZGlnaXRzXCJcbiAgICBjbGFzcz1cInctZnVsbCByb3VuZGVkLWxnIGJvcmRlciBib3JkZXItZ3JheS0zMDAgcHgtNCBweS0zIHRleHQtZ3JheS03MDAgcGxhY2Vob2xkZXItZ3JheS00MDAgb3V0bGluZS1ub25lIHRyYW5zaXRpb24gZm9jdXM6Ym9yZGVyLWJsdWUtNTAwIGZvY3VzOnJpbmctMiBmb2N1czpyaW5nLWJsdWUtMjAwXCJcbiAgPlxuXG4gIDxidXR0b25cbiAgICB0eXBlPVwic3VibWl0XCJcbiAgICBjbGFzcz1cInJvdW5kZWQtbGcgYmctYmx1ZS02MDAgcHgtNSBweS0zIGZvbnQtbWVkaXVtIHRleHQtd2hpdGUgdHJhbnNpdGlvbiBob3ZlcjpiZy1ibHVlLTcwMFwiXG4gID5cbiAgICBTdWJtaXRcbiAgPC9idXR0b24+XG5cbjwvZm9ybT4iLCJjc3MiOiIubXktYnRuIHtcbiAgcGFkZGluZzogMTBweCAyMHB4O1xuICBiYWNrZ3JvdW5kOiAjMTBiOTgxO1xuICBjb2xvcjogd2hpdGU7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG59IiwianMiOiJkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiLm15LWJ0blwiKS5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgKCkgPT4ge1xuICBhbGVydChcIkhlbGxvIGZyb20gTGl2ZSBQcmV2aWV3IVwiKTtcbn0pOyJ9"]

Let's break down the pattern:

• a-z allows lowercase letters.
• A-Z allows uppercase letters.
• 0-9 allows numbers.
• _ allows underscores.
• {3,15} means the username length must be between 3 and 15 characters.

This pattern is useful for registration forms where usernames should follow a specific format.

Valid examples:

[code theme="dark"] john john123 john_doe [/code]

Invalid examples:

[code theme="dark"] jo john-doe john@123 [/code]

Strong Password Validation

This pattern is used to enforce strong password requirements.

[code theme="dark"] [/code]

This pattern contains multiple validation rules:

• (?=.*[a-z]) requires at least one lowercase letter.
• (?=.*[A-Z]) requires at least one uppercase letter.
• (?=.*\d) requires at least one numeric digit.
• .{8,} requires a minimum length of 8 characters.

A password must satisfy all four conditions to pass validation.

Valid examples:

[code theme="dark"] Hello123 Admin2025 Password1 [/code]

Invalid examples:

[code theme="dark"] hello123 HELLO123 HelloABC Ab1 [/code]

Common pattern Examples

Use Case	Pattern
10 Digit Mobile Number	\d{10}
6 Digit PIN Code	\d{6}
Username	[a-zA-Z0-9_]{4,20}
Letters Only	[A-Za-z]+
Lowercase Letters Only	[a-z]+
Uppercase Letters Only	[A-Z]+

Real World Use Cases

• User registration forms
• Contact forms
• Phone number validation
• Employee ID validation
• Username restrictions
• Coupon code validation
• PIN code verification
• Custom business forms

Important Limitation

The pattern attribute improves user experience but should never be considered a security feature.

Users can modify HTML, bypass browser validation, or send requests directly to the server.

Always validate data again on the server before processing it.

When Should You Use pattern?

• When input must follow a specific format
• When immediate browser validation is useful
• When you want better user experience
• When JavaScript validation is unnecessary
• When reducing invalid form submissions

The HTML pattern attribute is a simple but powerful feature that helps create cleaner, smarter, and more user-friendly forms.