What is the pattern attribute for input validation in HTML5?

The pattern attribute in HTML5 specifies a regular expression that the input must match to be valid, and it works with text-based input types like text, email, and tel; when the form is submitted, the browser checks the input against the pattern and prevents submission if it doesn’t match, displaying a default error message. 1. Use the pattern attribute by adding it directly to the input element with a regular expression value, such as pattern="[A-Za-z]{3}" for exactly three letters. 2. Always include the title attribute to provide a user-friendly description of the required format, improving accessibility. 3. Common uses include validating phone numbers with pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}", requiring an uppercase letter followed by digits using pattern="A-Z ", and allowing only alphanumeric characters with pattern="[A-Za-z0-9] ". 4. The pattern must match the entire input, and the browser automatically applies start (^) and end ($) anchors implicitly, so they are usually not needed. 5. The attribute is not supported for input types like number or date, so use min, max, or step instead for those. 6. Client-side validation via pattern enhances user experience but must be supplemented with server-side validation since it can be bypassed. 7. Most modern browsers support the pattern attribute, but for older browsers, use JavaScript fallbacks or polyfills to ensure consistent validation. Overall, the pattern attribute provides a simple and effective way to enforce input formatting rules directly in HTML without requiring JavaScript for basic validation.

The pattern attribute in HTML5 is used to specify a regular expression that the input value must match in order to be considered valid. It works with <input> elements of type text, tel, email, url, password, and others that accept text input.

When a form is submitted, the browser automatically checks if the input value conforms to the specified pattern. If it doesn't, the browser prevents form submission and displays a default error message.

How to Use the Pattern Attribute

You add the pattern attribute directly to an input element, providing a regular expression as its value:

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

In this example:

• The input must contain exactly three letters (uppercase or lowercase).
• The title attribute is often used alongside pattern to give users a helpful message about what the pattern requires.

Common Examples

1. Phone Number (simple format):

<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Format: 123-456-7890">

Accepts input like 123-456-7890.

2. Uppercase Letter Followed by Digits:

<input type="text" pattern="^[A-Z][0-9] $" title="Start with uppercase letter, followed by numbers">

3. Alphanumeric Only (no spaces or special characters):

<input type="text" pattern="[A-Za-z0-9] " title="Letters and numbers only">

Notes and Tips

• The pattern must match the entire input value. You don’t need to add ^ (start) and $ (end) anchors in most cases, as the browser implicitly applies them.
• The pattern attribute is not supported for all input types (e.g., number, date). For those, use other validation attributes like min, max, or step.
• Always pair pattern with a title to improve accessibility and user experience.
• Client-side validation with pattern improves UX but should not replace server-side validation, since it can be bypassed.

Browser Support and Fallback

Most modern browsers support the pattern attribute. For older browsers, you’ll need JavaScript fallbacks or polyfills to enforce validation.

Basically, the pattern attribute is a simple, effective way to enforce format rules on text input directly in HTML—no JavaScript required for basic use.

The above is the detailed content of What is the pattern attribute for input validation in HTML5?. For more information, please follow other related articles on the PHP Chinese website!