
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
HTML DOM Input Text pattern property
The HTML DOM Input Text pattern property is used for setting or returning the pattern attribute of an input text field. It checks the text against a regular expression specified by the pattern property.
Syntax
Following is the syntax for −
Setting the pattern property −
textObject.pattern = regexp
Here, regexp is a regular expression against which the text field is checked.
Example
Let us look at an example for the text pattern property −
<!DOCTYPE html> <html> <body> <h1>Input Text pattern property</h1> <p>The username can either be of three numeric characters or 6 alphabet characters from a to g</p> <form action="/Sample_page.php"> USERNAME: <input type="text" id="USR" name="user_name" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g"> <input type="submit"> </form> <br> <button onclick="textPattern()">GET PATTERN</button> <p id="Sample"></p> <script> function textPattern() { var P = document.getElementById("USR").pattern; document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P; } </script> </body> </html>
Output
This will produce the following output −
On entering text in the text field that doesn’t match by the regex specified in the pattern property, the following warning would be visible −
On clicking the GET PATTERN button −
- Related Articles
- HTML DOM Input Password pattern property
- HTML DOM Input Email pattern Property
- HTML DOM Input URL pattern Property
- HTML DOM Input Search pattern property
- HTML DOM Input Text size Property
- HTML DOM Input Text type Property
- HTML DOM Input Text value Property
- HTML DOM Input Text autocomplete Property
- HTML DOM Input Text autofocus Property
- HTML DOM Input Text defaultValue Property
- HTML DOM Input Text disabled Property
- HTML DOM Input Text form Property
- HTML DOM Input Text maxLength Property
- HTML DOM Input Text name Property
- HTML DOM Input Text placeholder property

Advertisements