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

html pattern phone number html input pattern numbers only html5 pattern for name with space html pattern generator html pattern not working html5 pattern generator html input pattern date email pattern html5 html tutorialshtml editor html code html form html tutorial html color html color codes html table html img html5 html code for website html and css html programs html website free html editor html5 tutorial wysiwyg html editor html tutorial pdf html converter php tutorial html example html tutorial css tutorial html css html tags html basics code html html online html mailto html lang html tags list

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai

Wikitechy Rated 5 / 5 based on 378284 reviews.
Wikitechy-logo

World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.

Wikitechy

About Us
Terms of Use
Privacy Policy
Contact Us

Workshop

Webinar

Join our Community

Advertise

Other Languages

English
Chinese
Deutsch
Russian

© 2016 - 2025 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai