HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The pattern attribute specifies a regular expression that the <input> element's value is checked against."
The pattern
attribute specifies a regular expression that the
<input>
element's value is checked against.
pattern
attribute works with the following input types:
text, date, search, url, tel, email, and password.
title
attribute to describe the pattern to help the user.
The pattern
attribute can be used on the following element:
An HTML form with an input field that can contain only three letters (no numbers or special characters):
<form action="/action_page">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
An <input> element with type="password" that must contain 6 or more characters:
<form action="/action_page">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
An <input> element with type="password" that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:
<form action="/action_page">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
The numbers in the table specify the first browser version that fully supports the attribute.
Attribute | |||||
---|---|---|---|---|---|
pattern | 5.0 | 10.0 | 4.0 | Not supported | 9.6 |