A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.geeksforgeeks.org/html/html-pattern-attribute/ below:

HTML pattern Attribute - GeeksforGeeks

HTML pattern Attribute

Last Updated : 11 Jul, 2025

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:



RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4