HTML - pattern Attribute

HTML pattern attribute is used with input elements to specify regular expression pattern that the user's input must match in order for the form submission to be accepted.

This attribute is frequently combined with the title attribute to offer a user-friendly tip or error message that clarifies the intended input type. The pattern attribute is an effective tool for validating and managing user input, assuring data accuracy and consistency in web forms.

Syntax

<input pattern="regexp">

Applies On

Below listed elements allow using of the HTML optimum attribute

Element	Description
<input>	HTML <input> tag is used to accept various type of inputs from user.

Example of HTML pattern attribute

Below examples will illustrate the HTML pattern attribute, where and how we should use this attribute!

Pattern attribute for accepting only characters

In this example, where we are going to apply the pattern attribute for the character validation.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'pattern' attribute</title>
</head>

<body>
   <p>HTML 'pattern' attribute</p>
   <form onsubmit="return false;"> 
      Name(only character): <br>
      <input type="text" 
             pattern="[ A-Za-z]{8}" 
             placeholder="Enter name">
      <button>Submit</button>
   </form>
</body>

</html>

Pattern attribute for accepting number

In this example we are going to apply the pattern attribute for the number validation

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'pattern' attribute</title>
</head>
<body>
   <p>HTML 'pattern' attribute</p>
   <form onsubmit="return false;"> 
      Pin code(only numbers): <br>
      <input type="password" 
             pattern="[0-9]{6}" 
             placeholder="Enter pin code">
      <button>Submit</button>
   </form>
</body>
</html>

Pattern attribute for form validation

Let's look at the following example, where we are going to use the pattern attribute with the input elements to specifies the regular expresson to match the entered value.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'pattern' attribute</title>
   <style>
      form {
         width: 300px;
         height: 220px;
         border: solid black;
      }

      form h2 {
         text-align: center;
      }

      form label {
         margin: 10px 10px;
      }

      form input {
         padding: 5px;
         margin: 2px;
         color: black;
      }

      form button {
         margin: 10px;
         padding: 3px;
      }

      input:valid {
         background-color: green;
      }

   </style>
</head>
<body>
   <p>HTML 'pattern' attribute</p>
   <form onsubmit="return false;">
      <h2>Login page</h2>
      <label>Username</label>
      <input type="text" 
             name='uname' 
             pattern="\w[ a-zA-Z]{5,14}" 
             required>
      <br>
      <label>Password</label>
      <input type="password" 
             name='password' 
             pattern="\d{8,8}" 
             required>
      <br>
      <button>Submit</button>
   </form>
   <p>
      Username should only include characters of 
      length 5-14 and password can only contain 
      alphanumeric characters of length 8.
   </p>
</body>
</html>

Supported Browsers

Attribute
pattern	Yes 5.0	Yes 10.0	Yes 4.0	Yes 10.1	Yes 9.0

html_attributes_reference.htm

Print Page