Using min and max attributes in HTML5

Here we will learn the use of min and max attributes in HTML5.

Introduction: The min and max attributes are used with number and date input types to provide restriction for input. min attribute specify minimum value and max attributes specify maximum value for input field. Now we use these attributes into form. We write the following code

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
No. <input type="number" name="num" min="1" max="10" />
<input type="submit" />
</form>
</body>
</html>

Now we run this code. The output will look like below


min and max attributes

We note here, textbox accept only values between 1 and 10. If we enter other value and click on submit button, then message is displayed as below figure


min and max attributes

We can set default value to it by writing following code 

 <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

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Date <input type="date" name="dd" min="2000-01-01" max="2020-01-01" />
<input type="submit" />
</form>
</body>
</html>
 

The output will look like below


min and max attributes

This will accept date only between 2000-01-01 and 2020-01-01. If we enter other date and click on submit button then message is displayed as below


min and max attributes