HTML pattern Attribute
Description
The HTML pattern
attribute is used with form input fields (typically with <input>
elements) to specify a regular expression that the input's value must match for the form to be submitted. This attribute is a powerful tool for client-side validation, allowing developers to restrict user input according to specific rules and formats without the need for JavaScript. It's especially useful for validating formats like email addresses, phone numbers, ZIP codes, and custom patterns.
The pattern
attribute works with various types of input, such as text
, date
, search
, url
, tel
, email
, and password
, enhancing the user experience by ensuring that the data entered matches the expected format before the form is sent to the server. When a user tries to submit a form with an input field that doesn't match the pattern, the browser will display a message prompting the user to adjust their input to the required format.
It's important to note that while the pattern
attribute adds a layer of client-side validation, server-side validation is still necessary to ensure data integrity and security, as client-side validation can be bypassed.
Here's a simple example of the pattern
attribute in action:
<form>
<label for="zip">Enter your ZIP code:</label>
<input type="text" id="zip" name="zip" pattern="d{5}" title="Five digit ZIP code" required>
<input type="submit">
</form>
In this example, the pattern
attribute is set to d{5}
, which means the input field will only accept a sequence of five digits, corresponding to a standard US ZIP code format. The title
attribute is used to provide a message that will be displayed if the pattern validation fails, guiding the user on the expected input format.
Syntax
<input pattern="regexp">
Values
- regexpA regular expression. No forward slashes should be specified around the pattern text. No regular expression is applied if the attribute value is absent, an empty string, or invalid.
Applies To
The pattern
attribute can be used on the following html elements.
Example
<form action="formscript.php">
<label for="username">Username (must contain only letters and numbers, 3-10 characters):</label><br>
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]{3,10}" title="Username must contain only letters and numbers and be between 3 to 10 characters long" required><br><br>
<label for="password">Password (must be at least 8 characters long):</label><br>
<input type="password" id="password" name="password" pattern=".{8,}" title="Password must be at least 8 characters long" required><br><br>
<input type="submit" value="Submit">
</form>
Browser Support
The following table will show you the current browser support for the HTML pattern
Attribute.
Desktop | |||||
12 | 4 | 4 | 12.1 | 5 |
Tablets / Mobile | |||||
18 | 4 | 12.1 | 4 | 1 | 37 |
Last updated by CSSPortal on: 26th March 2024