HTML <input> pattern attribute

The HTML <input> tag

Definition and Usage

pattern The attribute specifies a regular expression that checks the value of the <input> element when the form is submitted.

Note:pattern The attribute applies to the following input types:

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

Tip:Using Global title attribute to describe the pattern and help users understand.

Tip:Please visit our JavaScript Tutorial Learn more about regular expressions in Chinese.

Example

Example 1

Below is an HTML form containing an input field that can only contain 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

Example 2

The <input> element with a 'type' attribute of 'password' must contain at least 8 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 3

The <input> element with a 'type' attribute of 'password' must contain 8 or more characters, including at least one number, one uppercase letter, and one 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 eight characters, including one number, one uppercase letter, and one lowercase letter">
  <input type="submit">
</form>

Try It Yourself

Example 4

The <input> element with a 'type' attribute of 'email' must be in the following order: characters@characters.domain.

It consists of characters and an '@' symbol, followed by more characters, and then a '.' symbol. After the '.' symbol, at least add two 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 5

The <input> element with a 'type' attribute of 'search' 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 6

This is an <input> element with a 'type' attribute of 'url', which 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="Contains http://">
  <input type="submit">
</form>

Try It Yourself

Syntax

<input pattern="regexp">

Attribute Value

Value Description
regexp Regular expression for checking the value of the <input> element.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

Note:pattern Attributes are new attributes in HTML5.

The HTML <input> tag