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