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 max Attribute
The max attribute in HTML defines the maximum value for various form input elements and the progress element. It specifies the upper limit or boundary for user input and progress indicators, ensuring data validation and proper visual representation.
Syntax
Following is the syntax for the max attribute −
<element max="value">
Where value represents the maximum allowed value. The data type depends on the element type (number, date, or floating-point).
Elements Supporting Max Attribute
The max attribute can be used with the following HTML elements −
-
<input type="number">− Sets the maximum numeric value -
<input type="range">− Defines the upper bound of the slider -
<input type="date">− Specifies the latest selectable date -
<input type="datetime-local">− Sets the maximum date and time -
<input type="month">− Defines the latest selectable month -
<input type="time">− Sets the maximum time value -
<input type="week">− Specifies the latest selectable week -
<progress>− Defines the maximum value for progress calculation -
<meter>− Sets the upper bound of the measurement range
Using Max with Progress Element
The <progress> element uses the max attribute to define the completion point of a task. The progress is calculated as value/max ratio and displayed as a percentage.
Example
<!DOCTYPE html> <html> <head> <title>Progress Max Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Download Progress</h2> <p>File Download: <progress value="75" max="100"></progress> 75%</p> <p>Installation: <progress value="45" max="150"></progress> 30%</p> <p>Update Process: <progress value="8" max="10"></progress> 80%</p> </body> </html>
The output shows three progress bars with different max values −
Download Progress File Download: [??????????????????????????????????????????????????????????????????????????????????????????????????????????????] 75% Installation: [?????????????????????????????????????????????????????????????????????????????????????????????????????] 30% Update Process: [????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????] 80%
Using Max with Input Elements
Example − Number Input
Following example demonstrates the max attribute with number inputs −
<!DOCTYPE html>
<html>
<head>
<title>Max Attribute with Number Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Order Form</h2>
<form>
<label for="quantity">Quantity (Max 10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="5"><br><br>
<label for="price">Price (Max $1000):</label>
<input type="number" id="price" name="price" min="0" max="1000" step="0.01" value="250.50"><br><br>
<input type="submit" value="Submit Order">
</form>
</body>
</html>
Users cannot enter values beyond the specified maximum limits. The browser will show validation errors for out-of-range values.
Example − Date and Range Inputs
Following example shows max attribute with date and range input types −
<!DOCTYPE html>
<html>
<head>
<title>Max Attribute with Date and Range</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration</h2>
<form>
<label for="eventdate">Event Date (Before 2024-12-31):</label>
<input type="date" id="eventdate" name="eventdate" min="2024-01-01" max="2024-12-31"><br><br>
<label for="participants">Number of Participants (1-100):</label>
<input type="range" id="participants" name="participants" min="1" max="100" value="25">
<span id="participantValue">25</span><br><br>
<label for="eventtime">Event Time (Before 6 PM):</label>
<input type="time" id="eventtime" name="eventtime" max="18:00"><br><br>
<input type="submit" value="Register Event">
</form>
<script>
const rangeInput = document.getElementById('participants');
const rangeValue = document.getElementById('participantValue');
rangeInput.oninput = function() {
rangeValue.textContent = this.value;
}
</script>
</body>
</html>
The date input prevents selection beyond December 31, 2024, the range slider stops at 100, and time input rejects values after 6:00 PM.
Using Max with Meter Element
The <meter> element represents a scalar measurement within a known range, using max to define the upper boundary.
Example
<!DOCTYPE html> <html> <head> <title>Max Attribute with Meter</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>System Performance Metrics</h2> <p>CPU Usage: <meter value="65" min="0" max="100"></meter> 65%</p> <p>Memory Usage: <meter value="4.2" min="0" max="8"></meter> 4.2/8 GB</p> <p>Disk Space: <meter value="250" min="0" max="500" low="400" high="450"></meter> 250/500 GB</p> <p>Network Speed: <meter value="85" min="0" max="100" optimum="90"></meter> 85 Mbps</p> </body> </html>
The meter elements display measurements with their maximum bounds, showing relative usage levels.
Dynamic Max Values with JavaScript
The max attribute can be changed dynamically using JavaScript to create responsive interfaces.
Example
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Max Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Progress Bar</h2>
<p>Set Max Value: <input type="number" id="maxValue" value="100" min="50" max="200"></p>
<p>Current Progress: <progress id="progressBar" value="50" max="100"></progress></p>
<p>Progress: <span id="progressText">50%</span></p>
<button onclick="updateMax()">Update Max Value</button>
<button onclick="increaseProgress()">Increase Progress</button>
<script>
function updateMax() {
const newMax = document.getElementById('maxValue').value;
const progressBar = document.getElementById('progressBar');
progressBar.max = newMax;
updateProgressText();
}
function increaseProgress() {
const progressBar = document.getElementById('progressBar');
if (progressBar.value < progressBar.max) {
progressBar.value = parseFloat(progressBar.value) + 10;
updateProgressText();
}
}
function updateProgressText() {
const progressBar = document.getElementById('progressBar');
const percentage = (progressBar.value / progressBar.max * 100).toFixed(1);
document.getElementById('progressText').textContent = percentage + '%';
}
</script>
</body>
</html>
This example allows users to modify the maximum
136 Views
