HTML <input> pattern Attribute
Example
An HTML form with an input field that can contain only three letters (no numbers or special characters):
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input
type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code"><br><br>
<input type="submit">
</form>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The pattern attribute specifies a regular expression that the
<input> element's value is checked against
on form submission.
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.
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 | 10.1 | 9.6 |
Syntax
<input pattern="regexp">
Attribute Values
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
More Examples
Example
An <input> element with type="password" that must contain 8 or more characters:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd"
name="pwd"
pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
Try it Yourself »
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">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
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 »
Example
An <input> element with type="email" that must be in the following order: characters@characters.domain (characters followed by an @ sign, followed by more characters, and then a "."
After the "." sign, add at least 2 letters from a to z:
<form action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
Try it Yourself »
Example
An <input> element with type="search" that CANNOT contain the following characters: ' or "
<form action="/action_page.php">
<label
for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Try it Yourself »
Example
An <input> element with type="url" that must start with http:// or https:// followed by at least one character:
<form action="/action_page.php">
<label
for="website">Homepage:</label>
<input type="url" id="website"
name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
Try it Yourself »
❮ HTML <input> tag
