Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Number max Property
The HTML DOM input number max property returns and modifies the value of the max attribute of an input field with type="number". This property sets the maximum allowed value for the number input field.
Syntax
Following is the syntax for getting the max value −
object.max
Following is the syntax for setting the max value −
object.max = "number"
Parameters
The max property accepts a single parameter −
number − A string representing the maximum value allowed for the number input. It can be an integer or floating-point number.
Return Value
The max property returns a string representing the maximum value of the number input field. If no max attribute is set, it returns an empty string.
Example − Getting the Max Value
Following example demonstrates how to get the max value of a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Max Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Getting Max Value of Number Input</h2>
<label for="score">Test Score (0-100):</label>
<input type="number" id="score" min="0" max="100" value="85">
<button onclick="getMax()">Get Max Value</button>
<p id="result"></p>
<script>
function getMax() {
var input = document.getElementById("score");
var maxValue = input.max;
document.getElementById("result").innerHTML = "Maximum allowed value: " + maxValue;
}
</script>
</body>
</html>
The output displays the maximum value retrieved from the input field −
Maximum allowed value: 100
Example − Setting the Max Value
Following example shows how to dynamically change the max value of a number input −
<!DOCTYPE html>
<html>
<head>
<title>Set Max Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Setting Max Value Dynamically</h2>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" min="1" max="10" value="5">
<br><br>
<button onclick="setMax(50)">Set Max to 50</button>
<button onclick="setMax(100)">Set Max to 100</button>
<button onclick="showCurrentMax()">Show Current Max</button>
<p id="display"></p>
<script>
function setMax(newMax) {
var input = document.getElementById("quantity");
input.max = newMax;
document.getElementById("display").innerHTML = "Max value set to: " + newMax;
}
function showCurrentMax() {
var input = document.getElementById("quantity");
document.getElementById("display").innerHTML = "Current max value: " + input.max;
}
</script>
</body>
</html>
Clicking the buttons changes the maximum allowed value for the input field.
Example − Validation with Max Property
Following example demonstrates input validation using the max property −
<!DOCTYPE html>
<html>
<head>
<title>Input Validation with Max</title>
<style>
.error { color: red; font-weight: bold; }
.success { color: green; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Age Input with Validation</h2>
<label for="age">Enter your age (1-120):</label>
<input type="number" id="age" min="1" max="120">
<button onclick="validateAge()">Validate</button>
<p id="message"></p>
<script>
function validateAge() {
var input = document.getElementById("age");
var message = document.getElementById("message");
var value = parseInt(input.value);
var max = parseInt(input.max);
var min = parseInt(input.min);
if (isNaN(value)) {
message.innerHTML = '<span class="error">Please enter a valid number!</span>';
} else if (value > max) {
message.innerHTML = '<span class="error">Age cannot be greater than ' + max + '!</span>';
} else if (value < min) {
message.innerHTML = '<span class="error">Age cannot be less than ' + min + '!</span>';
} else {
message.innerHTML = '<span class="success">Valid age: ' + value + '</span>';
}
}
</script>
</body>
</html>
The validation checks if the entered value exceeds the maximum allowed value and displays appropriate messages.
Browser Compatibility
The input number max property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It is part of the HTML5 specification and works consistently across platforms.
Key Points
The
maxproperty returns and sets the maximum allowed value for number input fields.The property value is always a string, even when representing numeric values.
Setting the max property dynamically updates the input's validation behavior.
The browser automatically validates user input against the max value when the form is submitted.
Use
parseInt()orparseFloat()to convert the string value for numeric comparisons.
Conclusion
The HTML DOM input number max property provides an efficient way to control and validate the maximum values in number input fields. It enables both getting the current maximum limit and dynamically updating it through JavaScript, making it essential for creating robust form validation and user input controls.
227 Views
