PUBLISHED ON: JULY 29, 2021
How to specify the minimum value for the input field of type number?
Answer: Using min
attribute, we can specify the minimum value for the input field of the type number.
Generally, the input field of type number accepts any numbers. But sometimes we need to add some minimum limit of value to the input field. For example, if you are going to add the age of any employee then you cannot allow the user to add any number lower than 18. We can easily set a minimum limit using the min
attribute.
Using min
attribute
The min
attribute is added to the <input>
tag to set the minimum limit to the input field of type="number"
. When the user enters a value less than min
value. A message will be displayed to inform the user about the minimum value. Also, the value will be not submitted to the server.
Example: Specify the minimum value for input field of type number
Here in the below program, we have added a text input field along with a number input field. The number input field is added with min="18".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> Using min attribute in input field</h2>
<label for="name">Enter employee name </label>
<input type="text" id="name" name="name"><br>
<label for="age"> Age </label>
<input type="number" id="age" name="age" min="18">
</body>
</html>
Output:
Example: Adding min attribute along with max attribute to specify a range of input field
The max
attribute is used to specify the maximum value for the input field with type="number"
. The max
attribute is added with the min
attribute to set the range of the input field. The min value should be less than the max value.
Conclusion
We can define the lower limit of the input field of type number in HTML, by setting the range using the min attribute. The min attribute guarantees that the user does not enter the value more than that.