PUBLISHED ON: JULY 29, 2021
How to specify the maximum value for the input field of type number?
Answer: Using max
attribute, we can specify the maximum value for the input field of the type number.
The input field can be added with any number. But sometimes we need to set the limit to the maximum value of the input field. For example, if you want the user to enter his age. Then you cannot exceed the value above 100 as it is the maximum limit. The maximum limit can be set using the max
attribute in HTML.
Using max
attribute
The max
attribute is used to limit the maximum value of the number in the input field. Use max
attribute within <input>
tag. When the user will enter a value greater than the max value it will display a message to the user. The number greater than the max value will not be submitted to the server.
Example: Maximum value in the input number field
Here, we have a sample example where we have set the value of max
to 100.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> Using max attribute in input field</h2>
<p> The input field will not accept the value greater than 100</p>
<label for="age"> Enter Age </label>
<input type="number" id="age" name="age" max="100">
</body>
</html>
Output:
Example: Adding max attribute along with min attribute to specify a range of input field
The min
attribute is used to specify the minimum value for the input field with type="number"
. The min
attribute is added with the max
attribute to set the range of the input field. The max value should be greater than the min value.
Conclusion
Here, we have learned to set the maximum value to the number input field. It is useful when the value should be added to the input field in some particular range. We can use the max
attribute to set the uppermost limit.