html tutorial - pattern Attribute in HTML - html5 - html code - html form




Pattern attribute in html

Learn html - html tutorial - Pattern attribute in html - html examples - html programs

  • The pattern attribute defines a regular expression that the <input> element's value is checked against.

Syntax for pattern attribute in HTML:

<input pattern="regexp">

Differences between HTML 4.01 and HTML5 for pattern attribute:

HTML 4.01

  • The pattern attribute is not supported in HTML4.

HTML 5

  • The pattern attribute is new to HTML5.

Applies To:

Element Attribute
<input> pattern

Attribute Values:

Value Description
regexp Describes a regular expression that the <input> tag's value is checked against

Sample Coding for pattern Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
  <body>
      <form >Enter the Pincode: 
      <input required type="text" name="pincode" pattern="[0-9]{6}">
      <input type="submit">
      </form >
  </body>
</html>

Code Explanation for pattern Attribute in HTML:

pattern Attribute Code Explanation

  1. pattern attribute is used for a regular expression which has an <input> element's value has been checked alongside. (The regular expression is [0-9]{6})

Output for pattern Attribute in HTML:

pattern Attribute Tag Output

  1. The user enter the value for pincode in the input field.
  2. Click the submit button
  3. After clicking submit button the pincode which the user enter in the input field is displayed in the address bar or URL.
pattern Attribute Tag Output

  1. If the user types the letter instead of number
  2. If the user clicks the submit button the warning message is displayed in the output as “Please match the format requested”.

Browser Support for pattern Attribute in HTML:

Yes Yes Yes No Yes

Tips and Notes

  • The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
  • The global title attribute is used to describe the pattern to help the user.

Related Searches to pattern attribute in html

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×