HTML - attributes - pattern

revision:


Content

"pattern" attribute : specifies a regular expression to be checked against syntax some examples


"pattern" attribute : specifies a regular expression to be checked against

top

The pattern attribute specifies a regular expression that the <input> element's value is checked against. The pattern attribute can be used on the following element: <input>. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Tip: use the global title attribute to describe the pattern to help the user.


syntax

top

<input pattern="regular expression">

A regular expression is a formalized string of characters that define a pattern. For example [a-zA-Z0-9]+ is a pattern that matches against a string of any length, as long as the string contains only lowercase letters (a-z), uppercase letters (A-Z), or numerals (0-9).


some examples

top


codes:
                    <form style="margin-left:3vw;" action="/action_page.php">
                        <label for="country_code">Country code:</label>
                        <input type="text" id="country_code" name="country_code"
                        pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
                        <input type="submit">
                    </form>
                

A form with a password field that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:

HTML codes:

                    <p class="spec">A form with a password field that must contain 8
                    or more characters that are of at least one number, 
                    and one uppercase and lowercase letter:</p>
                    <form form style="margin-left:3vw;" action="/action_page.php">
                    <label for="pwd">Password:</label>
                    <input type="password" id="pwd" name="pwd" 
                    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number 
                    and one uppercase and lowercase letter, and at least 8 or more characters">
                    <input type="submit">
                    </form>