Post
Ask Question

Using min and max attributes in HTML5

Using min and max attributes in HTML5

 
The min and max attributes are used with number and date input types to provide restriction for input. min attribute specifies a minimum value and max attributes specify a maximum value for the input field. Now we use these attributes into form. We write the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form method="post">  
  5. No.   
  6.             <input type="number" name="num" min="1" max="10" />  
  7.             <input type="submit" />  
  8.         </form>  
  9.     </body>  
  10. </html>  
Now we run this code. The output will look like below:
 
min and max attributes
 
We note here, textbox accepts only values between 1 and 10. If we enter other value and click on the submit button, then the message is displayed as below figure:
 
min and max attributes
 
We can set the default value to it by writing the following code:
  1. <input type="number" name="num" min="1" max="10"  value="2"/>   
Now we run this code. The output will look like below:
 
min and max attributes
 
We use these attributes with date input type. We write the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form method="post">  
  5. Date   
  6.             <input type="date" name="dd" min="2000-01-01" max="2020-01-01" />  
  7.             <input type="submit" />  
  8.         </form>  
  9.     </body>  
  10. </html>  
The output will look like below:
 
min and max attributes
 
This will accept the date only between 2000-01-01 and 2020-01-01. If we enter other date and click on submit button then the message is displayed as below:
 
min and max attributes
Next Recommended Reading How to use HTML5 Download Attribute