Horje
How to build HTML pattern Attribute in input

The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.

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.

Tip: Learn more about regular expressions in our JavaScript tutorial.

 


How to look HTML pattern Attribute in input

An input field that can contain only three letters (no numbers or special characters):
index.html
Example: HTML
 <form>
  <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">
</form> 

Output should be:

How to look HTML pattern Attribute in input

Full Example of HTML pattern Attribute in input

The pattern attribute specifies a regular expression that the input element's value is checked against.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The input pattern attribute</h1>

<p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>

<form 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" value="Submit">
</form>

</body>
</html>

Output should be:

Full Example of HTML pattern Attribute in input





Related Articles
What is HTML Input Attributes HTML Input Attributes
How to create HTML The value Attribute HTML Input Attributes
How to create HTML readonly Attribute HTML Input Attributes
How to create HTML disabled Attribute in input HTML Input Attributes
How to edit HTML size Attribute in input HTML Input Attributes
How to create HTML maxlength Attribute in input HTML Input Attributes
How to create HTML min and max Attributes HTML Input Attributes
How to create HTML multiple Attribute HTML Input Attributes
How to build HTML pattern Attribute in input HTML Input Attributes
How to set HTML placeholder Attribute HTML Input Attributes
How to create HTML required Attribute in input HTML Input Attributes
How to create HTML step Attribute in input HTML Input Attributes
How to set HTML autofocus Attribute in input HTML Input Attributes
How to add height and width Attributes in HTML Input HTML Input Attributes
How to create HTML list Attribute in input HTML Input Attributes
How to add HTML autocomplete Attribute in Input HTML Input Attributes
What is HTML Input form Attributes HTML Input Attributes
How to create HTML form Attribute in Input HTML Input Attributes
How to set HTML form action Attribute in Input HTML Input Attributes
How to set HTML formenctype Attribute in input HTML Input Attributes
How to set HTML form method Attribute in Input HTML Input Attributes
How to set HTML form target Attribute in Input HTML Input Attributes
How to set HTML formnovalidate Attribute in Input HTML Input Attributes
How to set HTML novalidate Attribute in Input HTML Input Attributes
How to create HTML Video - Methods, Properties, and Events using Javascript HTML Input Attributes

Single Articles
How to look HTML pattern Attribute in inputHTML Input Attributes
Full Example of HTML pattern Attribute in inputHTML Input Attributes

Read Full:
HTML Input Attributes
Category:
Web Tutorial
Sub Category:
HTML Input Attributes
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
161


Reffered: https://www.w3schools.com/html/html_form_attributes.asp

Share on: