Pattern attribute
The pattern attribute defines a particular pattern that an input field’s value must satisfy when the form is submitted. The pattern attribute works with text, date, search, URL, tel, email, and password input types. We make use of regex or regular expressions to specify the pattern. It is useful in situations where we want the input entered must be according to the given pattern only. The inputs that do not satisfy the pattern will not be accepted by the form.
Syntax:
<input type=" " id=" " name=" " pattern=" ">
Example: The implementation of pattern attribute
HTML
<!DOCTYPE html><html><head> <title>HTML pattern attribute</title> <style> button { margin-top: 5px; } </style></head><body> <h1>HTML pattern attribute</h1> <form> <label>Tel.</label> <input type="text" pattern="[0-9]{10}" required /> <label>Email:</label> <input type="email" multiple required /> <button>Submit</button> </form></body></html> |
Output:
In the above example, the pattern specifies that Tel. can be composed of digits only and its length must be 10.This is how we can make the form data required or add certain checks on the input that is entered.
How to perform form validation for a required field in HTML ?
The form data is very important for a website and the correct form data or valid form data must be submitted to the form. To make sure that the form data is valid or to make an input field mandatory, various attributes can be used. We shall discuss the following attributes in this article & will understand them with the help of examples.
Table of Content
- Required attribute
- Maxlength attribute
- Minlength attribute
- Min and max attribute
- Multiple attribute
- Pattern attribute
Contact Us