logo

HTML pattern attribute

The value of pattern attribute should match the value entered by the user in the input control.

<form action="files/patter.php">
 Email: <input type="email" name="email">
 Password: <input type="password" pattern="[A-Z][0-9]" name="pass" minlength="8" title="The password includes uppercase letters and numbers.">
 <input type="submit" name="login" value="Sign in">
 </form>
</>
Email: Password:

The above example describes that the password should include only uppercase letters and numbers. This is just an example otherwise password should be strong (It should also include lower case letters and special characters).

Attribute values

All possible values of pattern attribute

The value of the pattern attribute is a regular expression. See the following example to understand the concept of regular expression.

You can specify a range of numbers or letters.

<p>Password: <input type="password" pattern="[A-Z][0-9]{1489-6900}" name="pass" minlength="8" title="The password includes uppercase letters and numbers."></p>

Try</>

It says that the number should be in between 1489 and 6900.

The title attribute should not be used to tell the user about the pattern , because the tool tip is not visible for the touch-only and keyboard-only users. So small element should be used with the input element.

See example to understand.

<p>Password: <input type="password" pattern="[A-Z][0-9]" name="pass" minlength="8"><small>(It should include numbers and uppercase letters)</small></p>

Related Tags

The tags that support pattern attribute

<input> tag

Only input element supports the pattern attribute.

Was this article helpful?