html tutorial - pattern Attribute in HTML - html5 - html code - html form
Learn html - html tutorial - Pattern attribute in html - html examples - html programs
- The pattern attribute defines a regular expression that the <input> element's value is checked against.
Syntax for pattern attribute in HTML:
<input pattern="regexp">Differences between HTML 4.01 and HTML5 for pattern attribute:
HTML 4.01
- The pattern attribute is not supported in HTML4.
HTML 5
- The pattern attribute is new to HTML5.
Applies To:
| Element | Attribute |
|---|---|
| <input> | pattern |
Attribute Values:
| Value | Description |
|---|---|
| regexp | Describes a regular expression that the <input> tag's value is checked against |
Sample Coding for pattern Attribute in HTML:
Tryit<!DOCTYPE html>
<html>
<body>
<form >Enter the Pincode:
<input required type="text" name="pincode" pattern="[0-9]{6}">
<input type="submit">
</form >
</body>
</html>Code Explanation for pattern Attribute in HTML:
- pattern attribute is used for a regular expression which has an <input> element's value has been checked alongside. (The regular expression is [0-9]{6})
Output for pattern Attribute in HTML:
- The user enter the value for pincode in the input field.
- Click the submit button
- After clicking submit button the pincode which the user enter in the input field is displayed in the address bar or URL.
- If the user types the letter instead of number
- If the user clicks the submit button the warning message is displayed in the output as “Please match the format requested”.
Browser Support for pattern Attribute in HTML:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Yes | Yes | Yes | No | Yes |
Tips and Notes
- The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
- The global title attribute is used to describe the pattern to help the user.