Post
Ask Question

Pattern Attribute in HTML5

Introduction

 
The pattern attributes is used to make customized textbox that accepts input in predefined format. Although there is input type which accept certain input type like email, URL, date, time etc. But it is used for making a more customized input field. Suppose we want a textbox that accepts only ten-digit for phone number. We will write the below code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form method="post">  
  5. Phone Number   
  6.             <input type="text" pattern="[0-9]{10}" title="Ten Digit Number" />  
  7.             <input type="submit" />  
  8.         </form>  
  9.     </body>  
  10. </html>  
Output will look like below figure:
 
pattern attribute
 
Here, we note that when input length is not equal to ten, then it shows a message with the title 'Ten Digit Number' on button click. Like as below figure
 
 pattern attribute
Next Recommended Reading Using min and max attributes in HTML5