HTML pattern Attribute

HTML pattern Attribute

The HTML pattern attribute specifies a regular expression that an input value must match for the value to pass constraint validation.

Elements That Use the pattern Attribute

The pattern attribute is used with the <input> element on input types that accept certain text-based values.

pattern Value

The value of the pattern attribute is a valid JavaScript regular expression. The expression is written directly as the attribute value without the forward slashes commonly used around regular expressions in JavaScript code.

<input type="text" pattern="[A-Za-z]{3}">

This pattern accepts exactly three letters.

Supported Input Types

The pattern attribute applies to the text, search, url, tel, email, and password input types.

<input type="text" pattern="[A-Za-z]{3}">
<input type="search" pattern="[A-Za-z0-9 ]+">
<input type="url" pattern="https://.*">
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<input type="email" pattern=".+@example\.com">
<input type="password" pattern=".{8,}">

When pattern is used with an input type that does not support it, the attribute does not provide pattern validation for that control.

How Pattern Matching Works

The regular expression must match the input's entire value rather than only part of it. Browsers compile the pattern using the JavaScript regular expression v flag, which provides Unicode-aware matching and Unicode set notation.

<input type="text" pattern="[0-9]{5}">

The value must contain exactly five digits. A value such as 12345 matches, while 123, 123456, or ZIP12345 does not.

Do not add regular expression delimiters around the value.

<!-- Correct -->
<input type="text" pattern="[0-9]{5}">

<!-- Incorrect -->
<input type="text" pattern="/[0-9]{5}/">

pattern Examples

The pattern attribute can describe many different input formats. The following example requires a three-letter code.

<label for="code">Three-letter code:</label>
<input type="text" id="code" name="code"
       pattern="[A-Za-z]{3}"
       title="Enter exactly three letters.">

A telephone field can require a specific numeric format.

<label for="phone">Phone number:</label>
<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       title="Enter a phone number as 555-123-4567.">

A password field can require a minimum number of characters.

<label for="password">Password:</label>
<input type="password" id="password" name="password"
       pattern=".{8,}"
       title="Enter at least eight characters.">

pattern Validation

When a non-empty input value does not match a valid pattern, the control fails constraint validation and its patternMismatch validity state becomes true.

The pattern attribute does not make a field required. If an empty value should be rejected, add the required attribute.

<label for="zip">ZIP code:</label>
<input type="text" id="zip" name="zip"
       pattern="[0-9]{5}"
       title="Enter a five-digit ZIP code."
       required>

Provide visible instructions that explain the expected format. A title attribute can provide additional information about the pattern, but it should not replace instructions that users can see.

Common Mistakes

Do not surround the regular expression with forward slashes. The pattern attribute contains the expression itself, not JavaScript regular expression literal syntax.

Do not assume pattern makes an input required. An empty value does not cause a pattern mismatch unless another constraint, such as required, prevents the field from being empty.

Do not use pattern on input types that do not support it. It applies to text, search, url, tel, email, and password.

Do not rely only on the title attribute to explain the required format. Include visible instructions so users know what value is expected before validation occurs.

Do not assume client-side pattern validation replaces server-side validation. Submitted data should still be validated on the server.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The pattern attribute is widely supported on applicable <input> types in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the pattern Attribute

The example uses the pattern attribute to require a five-digit ZIP code. Enter exactly five digits to satisfy the pattern, or enter a different value to see the browser's built-in validation when the form is submitted.

Summary

The HTML pattern attribute uses a regular expression to define the format an input value must match to pass constraint validation. It can be used with the text, search, url, tel, email, and password input types and should be accompanied by clear instructions describing the expected format.