HTML pattern Attribute
Definition and Usage
The pattern attribute specifies a regular expression that the
<input> element's value is checked against.
Note: The pattern attribute works with the following input types:
text, date, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Applies to
The pattern attribute can be used on the following element:
| Element | Attribute |
|---|---|
| <input> | pattern |
Examples
Input Example
An HTML form with an input field that can contain only three letters (no numbers or special characters):
<form action="/action_page.php">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
Try it Yourself »
Password Example
An <input> element with type="password" that must contain 6 or more characters:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
Try it Yourself »
Password Example
An <input> element with type="password" that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | Not supported | 9.6 |
