Open In App

HTML pattern Attribute

Last Updated : 29 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML pattern attribute is used with <input> elements to specify a regular expression that the input’s value must match for the form to be submitted. It enforces specific formatting rules, like requiring a certain number of characters or specific character types.

Syntax:

<input pattern = "regular_exp">

Element: This attribute is associated with <input> element only. 

Attribute: This attribute specifies the regular expression. 

Example: In this example we use the pattern attribute to enforce a three-letter password. The input must match the specified pattern of three alphabetic characters, or it will not submit.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>pattern attribute</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>pattern attribute</h2>
    <form action="#">
        <label for="userPass">Password:</label>
        <input type="text" 
               name="password" 
               id="userPass" 
               pattern="[A-Za-z]{3}" 
               title="3 letter Password">
        <input type="submit" value="submit">
    </form>
</body>

</html>

Output :

Supported Browsers: The browser supported by pattern attribute are listed below:


Next Article

Similar Reads