THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML <input> pattern Attribute

❮ HTML <input> tag

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 »

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

Differences Between HTML 4.01 and HTML5

The pattern attribute is new in HTML5.


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 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 »

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 »

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">
E-mail: <input type="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">
Search: <input type="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">
Homepage: <input type="url" name="website" pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
Try it Yourself »

❮ HTML <input> tag