HTML Pattern Attribute
What does HTML's Pattern Attribute Mean?
As the name implies, a pattern is anything that is occasionally recurring and is structured in a certain way. Anything may have a pattern, including designs, expressions, and mathematical functions. In HTML, we have pattern attributes that work similarly to that. Now, let's explore the HTML pattern attribute.
The HTML pattern property describes certain regular expressions, which must match the input values we have provided.
How do regular expressions work, though?
Generally speaking, a regular expression is any pattern or expression used to characterize any substring within a string, whether it be strings, integers, characters, etc. Regular expressions describe the search pattern in any string.
Let's look at an example to understand the HTML pattern property better. Assume your online form contains a "username" field. Suppose you want the username to adhere to a specific set of rules (or structure).
Thus, you require the username to meet the following requirements:
- Only lowercase letters should be used in the username.
- The username shouldn't contain any numbers or special characters in uppercase.
- A username should not be more than twelve characters.
The following patterns can be expressed in RegEx using the syntax shown below:
RegEx based on the username:
[a-z]{1,15}
Now that the code is complete let's see how to add it to the pattern attribute.
<!DOCTYPE html>
<html>
<head>
<title>
Example for HTML input pattern attribute
</title>
<style>
body {
text-align:left;
}
h2 {
color:red;
}
</style>
</head>
<body>
<h2>HTML <input>pattern attribute</h2>
<form action="#">
Username: <input type="text" name="Username"
pattern="[a-z]{3}" title="Five letter Username">
<input type="submit">
</form>
</body>
</html>
Output
Therefore, we will receive an error message as soon as we enter a username that deviates from the specified parameters. This is how the regular expression-based validations in the HTML pattern property operate.
Let's list some crucial details of the HTML pattern attribute:
- In HTML, the pattern property specifies a regular expression. Additionally, we compare the input value patterns to the given regular expression.
- The pattern attribute is included in the email, password, text, search, URL, date, and tel input types.
- The pattern property utilizes the input items.
- The input values that we send must match the given patterns for the pattern matching to be successful.
- Regular expressions are specified via the pattern properties on the tags. Before submission, these regular expressions verify the data entered (typically in forms).
- The data checking is completed right before the forms are sent in.
- When submitting the form, an error bubble with the title and patternMismatch constraint validation error message appears if the value does not match the regular expression defined in the pattern.
Now that we are sufficiently informed on the pattern attribute, let's examine its syntax.
Syntax:
Below is the HTML syntax for the pattern attribute:
<input type pattern = "regular_expression">
Any of the following input types can be used in the HTML pattern attribute:
- text
- search
- password
- date
- url
- tel
The pattern is discussed next, followed by the input type. The regular expression that we will use to compare the input type is mentioned in the pattern. Put another way, we use the regular expression provided in the pattern to validate the input.
What is Constraint validation?
Form validations used to be extremely challenging and intricate chores for developers. Their main problem was getting a developer-friendly and user-friendly form validation implemented on the client side in a much more accessible manner. This was mostly because, before HTML5, form validations could not be implemented natively; as a result, developers had to rely entirely on JavaScript to provide the validations.
To address the problems above, HTML5 introduced the notion of constraint validation. The essence of constraint validation is implementing client-side validations on any online form.
Constrained validation is an algorithm that browsers perform upon submission of any form to verify that it is legitimate. That approach also uses several HTML characteristics, including step, max, min, pattern, needed, maxlength, type, etc., to carry out this constraint checking.
Note: If the pattern attribute is supplied with no value, the empty string is assumed to be its value. Therefore, a constraint violation will occur for every non-empty input value.
Syntax
<form>
<input type="phonenumber" required value="" />
<input type="submit" value="Submit" />
</form>
Example
<!DOCTYPE html>
<html>
<head>
<title>
Example for HTML input pattern attribute
</title>
<style>
body {
text-align:left;
}
h2 {
color:red;
}
</style>
</head>
<body>
<h2>HTML <input>pattern attribute</h2>
<form>
<input type="phonenumber" required value="" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Output
Our form requires a phone number as input in the example above. It has also set this field as mandatory.
Depending on the browser we are using, we will get the following problem if we submit the above form straight away without entering any information (or phone number).
Example 2: Configure the Password Type Pattern
We shall see how to establish the pattern of the type "password" in this example. When it comes to passwords, we may use a variety of validation methods.
Here, we will design a pattern that accepts a password that is a minimum of 8 characters long and contains at least 1 digit, at least 1 uppercase character, and at least 1 lowercase letter.
Let's examine the pattern we will be utilizing to perform the password validation before diving into our code:
pattern= "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
Thus, the pattern above defines a regular expression in which the number 'd' is specified, any lowercase letter [a-z] is specified, and any capital character [A-Z] is specified. We have also provided a length by using {8}. It stipulates that a password must have a minimum length of 8.
<html>
<body>
<form action="/action_page.php">
Password: <input type="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Password length must be at least 8, and must contain at least 1 uppercase, 1 lowercase character, and 1 digit">
<input type="submit">
</form>
</body>
</html>
Output
Thus, we have developed our code for the password pattern matching in the case above. An error will appear right away if we enter any data that deviates from the guidelines we have laid down in our pattern.
Why do pattern validations not always rely solely on pattern attributes?
Let's say you are creating a web form with a credit card number required in one of the input fields. You may create a regular expression to match credit card patterns that are intended to match MasterCard and Visa. However, is it feasible for you to create regexp patterns on your own that are compatible with all credit card types? Because our code was not intended for use with American Express cards, it would undoubtedly fail if we tried it with such cards.
Therefore, it increasingly gets more difficult to only check our inputs against simple regexp patterns that we have generated when you start constructing complicated apps, especially when you want your application to run across national boundaries and various nations. Assume that license plates, payment methods, phone numbers, dates, and other details varied significantly between nations.
More than relying on our constructed patterns is required in certain situations. In those situations, we want a far more potent validation tool that is capable of validating against a wide range of inputs.
It is not advised to use the pattern property with regexp for particular fields, such as email dates, etc. Because of their widespread use, HTML has already specified certain form input types for them. Therefore, you must use HTML whenever it supports a feature or an input type rather than only depending on custom regexp patterns that you have created.]
Accepted Web Browsers
The list below includes the supported browsers for HTML pattern properties.
The list of popular web browsers that support the HTML pattern property is provided below:
- Google Chrome- 4
- Edge- 12
- Firefox- 4
- Opera- 12.1
- Safari- 5
Issues with accessibility
It is advised that forms with pattern attributes contain a title attribute that explains or characterizes the pattern. Many people might not be able to read the title attribute if we rely on it to determine how the text content is displayed. Although some browsers offer a tooltip whenever any element with a title has hovered, that is likewise confined to only keyboard users. This is the reason you have to give directions on how to complete the form so that it complies with the standards.
Conclusion
We studied the HTML pattern property in this post. Let's pause for a moment to consider what we have already witnessed!
- 1. Regular expressions may be used to define certain patterns in HTML using the pattern property. To verify these patterns' authenticity, they are compared to the inputs.
- 2. A regular expression is specified by the pattern property, which is used to conduct input validation.
- 3. The pattern property accepts regular_expression as its only input.
- 4. The pattern property can be used with text, password, date, search, email, and other input formats.
- 5. If the value does not fit the regular expression, the patternMismatch constraint validation error message and the title display in the error bubble upon submission.