Do you think IIT Guwahati certified course can help you in your career?
Introduction
The pattern attribute in HTML is used in <input> fields to define a regular expression that the input value must match. It helps in validating user input, ensuring that data follows a specific format, such as email addresses, phone numbers, or passwords. If the input does not match the pattern, the form will not submit.
In this article, you will learn how to use the pattern attribute effectively with examples.
Definition and Usage
HTML patterns are created using the `pattern` attribute in HTML. This attribute is used with input fields like text boxes to define a regular expression. A regular expression, or regex, is a sequence of characters that forms a search pattern. It helps validate the format of the data entered by the user. For example, if you want users to enter a valid phone number, you can use a pattern to ensure they only type numbers & follow a specific format.
The `pattern` attribute works with input types like `text`, `email`, `password`, & more. When a user tries to submit a form, the browser checks if the input matches the pattern. If it doesn’t, the form won’t submit, & the user will see an error message. This ensures the data collected is clean & consistent.
Example: Using HTML Pattern for a Phone Number
Let’s say you want users to enter a 10-digit phone number. Here’s how you can use the `pattern` attribute to enforce this rule:
1. `<input>` Element: The `type="text"` specifies that the input field accepts text. The `pattern="\d{10}"` ensures that only 10 digits are allowed. Here, `\d` means any digit, & `{10}` specifies exactly 10 occurrences.
2. `required` Attribute: This makes sure the field cannot be left empty.
3. Error Handling: If the user enters anything other than 10 digits, the browser shows an error when they try to submit the form.
This approach helps developers control user input without needing complex JavaScript validation. It’s simple, effective, & improves the overall quality of data collected.
Syntax
The pattern attribute is used inside an <input> tag to define a regular expression that the entered value must match.
<input type="text" pattern="[A-Za-z]+" title="Only letters are allowed">
Explanation:
The pattern attribute ensures that only letters (A-Z, a-z) are accepted.
The title attribute provides a message when the input does not match the pattern.
Element
The pattern attribute is mostly used with the <input> element in HTML forms. It is useful for validating different types of data such as phone numbers, email addresses, and passwords.
The required attribute ensures the field is not left empty.
Applies to
The `pattern` attribute in HTML applies to specific input types where text-based validation is needed. It’s not universal & works only with certain input fields. Understanding where you can use this attribute is important to make the most of it in your projects. Now, let’s discuss the input types that support the `pattern` attribute with proper examples:
1. Text Input
The `text` input type is the most common field where patterns are applied. It’s used for general text like names, addresses, or custom codes.
Example: Validating a Username
Let’s say you want users to create a username that is 5 to 10 characters long & contains only letters or numbers. Let’s see how you can do it:
`(?=.[A-Z])` ensures there’s at least one uppercase letter.
`(?=.\d)` ensures there’s at least one number.
`.{8,}` specifies the password must be at least 8 characters long.
4. Other Input Types
The `pattern` attribute also works with input types like `search`, `tel`, & `url`. However, it doesn’t apply to inputs like `checkbox`, `radio`, `range`, or `color`. Always check compatibility before using it.
Attribute
The pattern attribute works alongside other attributes to improve validation.
Commonly used attributes with pattern:
type – Defines the input type (e.g., text, email, password).
title – Provides a message when the pattern is not matched.
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Enter a valid email address">
Explanation:
Ensures that the user enters a valid email format.
Example
Below is a practical example that validates a password with specific requirements.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form>
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number, one uppercase, one lowercase letter, and at least 8 characters" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
Explanation
The password must have at least one uppercase letter, one lowercase letter, one number, and be at least 8 characters long.
Supported Browsers
The pattern attribute is widely supported by modern browsers:
Browser
Support
Google Chrome
Yes
Mozilla Firefox
Yes
Microsoft Edge
Yes
Safari
Yes
Opera
Yes
Frequently Asked Questions
What happens if an input does not match the pattern?
If the input value does not match the pattern, the form will not submit, and the browser will show an error message.
Can the pattern attribute be used with all input types?
No, it is mainly used with text-based input types like text, email, password, and tel.
How can I create a custom validation message?
You can use the title attribute to display a custom message when validation fails.
Conclusion
In this article, we learned the pattern attribute in HTML, which is used in <input> fields to define a regular expression for input validation. It ensures users enter data in a specific format, such as phone numbers, email addresses, or passwords. Understanding the pattern attribute helps improve form validation, user experience, and data accuracy in web development.
518+ registered 
