View video tutorial

HTML pattern Attribute

HTML

The HTML pattern attribute specifies a regular expression that the value of the form control must match.

Definition and Usage


➔ If the pattern does not meet the constraints, the patternMismatch property will be true.

➔ The pattern attribute is used with text, telephone, email, URL, password, and search input types.

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML pattern attribute Example</title>
</head>
<body>
    <h3>HTML pattern attribute Example</h3>
    <p>Type 4 uppercase or lowercase letters in the textfield to match the pattern and click Submit.</p>
    <form action="#">
        Country code:
        <input type="text" id="codeId" name="code" pattern="[A-Za-z]{4}"
            placeholder="4 letters in uppercase or lowercase." title="4 letters in uppercase or lowercase."><br><br>
        <input type="submit">
    </form>
</body>
</html>

Applies to

This attribute can be used on the following element.

Attribute Element
pattern <input>