Signup/Sign In

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:

HTML input field max attribute

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.



About the author: