The HTML pattern attribute allows developers to specify a regular expression that an input value must match. It is useful for validating usernames, identification codes, postal codes, and other text-based input fields. The browser checks the value against the specified pattern during normal form validation.
What Is the HTML Pattern Attribute?
The pattern attribute defines a format that an input value must follow before the browser allows normal form submission. It is supported on specific input types, including text, search, URL, telephone, email, and password.
For example, a registration form can use a pattern to require a username containing only letters and numbers.
To understand browser validation, explore HTML Form Validation and HTML Input Validation.
HTML Pattern Attribute Example
The following example requires a username containing between 3 and 12 English letters.
<form>
<label for="username">Username:</label>
<input
type="text"
id="username"
name="username"
pattern="[A-Za-z]{3,12}"
title="Enter 3 to 12 English letters."
required
>
<button type="submit">Register</button>
</form>In this example:
pattern="[A-Za-z]{3,12}"allows 3 to 12 English letters.titleprovides a helpful explanation of the expected format.requiredprevents an empty value from passing normal required-field validation.- The browser checks the value against the pattern when the user submits the form.
Values such as Karim match the pattern, while Karim123 does not because it contains numbers.
Common Pattern Attribute Examples
Regular expressions can enforce different input formats.
Letters Only
<input
type="text"
name="name"
pattern="[A-Za-z]+"
title="Enter letters only."
>This pattern allows one or more English letters without spaces.
Letters and Numbers
<input
type="text"
name="username"
pattern="[A-Za-z0-9]{4,15}"
title="Enter 4 to 15 letters or numbers."
>This pattern accepts 4 to 15 English letters or digits.
Indian PIN Code Format
<input
type="text"
name="pincode"
pattern="[1-9][0-9]{5}"
title="Enter a valid six-digit Indian PIN code."
>This pattern checks for six digits, with the first digit between 1 and 9. It checks the format only; it does not confirm that the PIN code actually exists.
Learn more about HTML Form Attributes and the HTML Required Attribute.
Understanding Regular Expression Symbols
The pattern attribute uses regular expression syntax to define acceptable values.
| Symbol | Meaning |
|---|---|
[A-Z] | An uppercase English letter |
[a-z] | A lowercase English letter |
[0-9] | A digit from 0 to 9 |
+ | One or more occurrences |
* | Zero or more occurrences |
{3,8} | Between 3 and 8 occurrences |
[A-Za-z] | An English uppercase or lowercase letter |
For example, [0-9]{6} matches exactly six digits. By default, HTML pattern validation checks the entire input value rather than just a matching portion.
Pattern Attribute with Password Fields
The pattern attribute can help enforce a password format in the browser.
<label for="password">Password:</label>
<input
type="password"
id="password"
name="password"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
title="Use at least 8 characters with an uppercase letter, a lowercase letter, and a number."
required
>This example requires at least eight characters, including an uppercase letter, a lowercase letter, and a digit. It does not replace secure password handling or server-side validation.
Important Limitations of the Pattern Attribute
The pattern attribute provides browser-side validation, but it cannot verify every real-world condition. For example, a pattern may check a postal code’s format but cannot confirm that the code is valid for a particular address.
Patterns also need to be written carefully. An incorrect regular expression can reject valid input or accept values that should not be allowed.
Always validate important data on the server because client-side validation can be bypassed.
Frequently Asked Questions
Does the pattern attribute make a field mandatory?
No. Use required when the user must enter a value. A pattern generally does not prevent an empty optional field from being submitted.
Can I use pattern with a number input?
No. The pattern attribute does not apply to type="number". Use attributes such as min, max, and step for numeric constraints.
Can I display a custom error message?
The title attribute can help explain the expected format. JavaScript and the Constraint Validation API can also be used to provide more specific messages.
Does pattern validation replace server-side validation?
No. The server must independently validate submitted data to enforce the application’s rules and security requirements.