HTML - pattern Attribute

The HTML pattern attribute is usually used with input elements, particularly text fields like input and textarea. It is used to specify a 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

Following is the syntax of the pattern attribute −

<input pattern="regexp">

Example

Considering the following 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>
   <!--example of the HTML pattern attribute-->
   <p>HTML 'pattern' attribute</p>
   <form> Name(only character): <br>
      <input type="text" pattern="[ A-Za-z]{8}" placeholder="Enter name">
      <button>Submit</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the input field along with a click button on the webpage. when the user tries to fill the input field irrespective of the characters it will throw exception.

Example

Let's look into the another scenario, where 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>
   <!--example of the HTML pattern attribute-->
   <p>HTML 'pattern' attribute</p>
   <form> Pin code(only numbers): <br>
      <input type="password" pattern="[0-9]{6}" placeholder="Enter pin code">
      <button>Submit</button>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the input field along with a click button on the webpage. when the user tries to fill the input field irrespective of the characters it will throw exception.

Example

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

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'pattern' attribute</title>
   <style>
      form {
         width: 300px;
         height: 220px;
         background-color: rgb(6, 121, 121);
         border-radius: 10px;
      }

      form h2 {
         text-align: center;
         font-family: sans-serif;
         position: relative;
         top: 5px;
         color: white;
      }

      form label {
         margin: 10px 10px;
      }

      form input {
         padding: 8px;
         margin: 2px;
         color: white;
      }

      form button {
         width: 100px;
         margin: 10px;
         padding: 7px;
         cursor: pointer;
      }

      input:valid {
         background-color: green;
      }

      input:invalid {
         background-color: rgb(243, 86, 86);
      }
   </style>
</head>
<body>
   <!--example of the HTML pattern attribute-->
   <p>HTML 'pattern' attribute</p>
   <form>
      <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="text" name='password' pattern="\d{8,8}" required>
      <br>
      <button>Submit</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the input field along with a click button on the webpage.if the user tries to fill the input field that doesn't match the regular expression it will throw a exception.

html_attributes_reference.htm
Advertisements