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

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 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:

The user enter the value for pincode in the input field.
Click the submit button
After clicking submit button the pincode which the user enter in the input field is displayed in the address bar or URL.

If the user types the letter instead of number
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.

PDF

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