Signup/Sign In
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:

HTML input field min attribute

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.



About the author: