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 specifies the maximum value for various input elements and the <meter> element. It defines the upper bound of the allowed range, ensuring that users cannot enter or display values beyond this limit.
Syntax
Following is the syntax for the max attribute −
<input type="number" max="value"> <input type="range" max="value"> <input type="date" max="YYYY-MM-DD"> <meter max="value"></meter> <progress max="value"></progress>
Where value is a number (for numeric inputs) or a date string (for date inputs) that sets the maximum allowed value.
Elements Supporting Max Attribute
The max attribute can be used with the following HTML elements −
<input>elements of type number, range, date, datetime-local, month, time, and week<meter>element for defining the upper bound of a gauge<progress>element for defining the maximum progress value
Using Max Attribute with Input Elements
Example − Number Input with Max Value
Following example demonstrates the max attribute with number input −
<!DOCTYPE html>
<html>
<head>
<title>Max Attribute - Number Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Age Input with Max Limit</h2>
<form>
<label for="age">Enter your age (max 120):</label><br><br>
<input type="number" id="age" name="age" min="0" max="120" value="25">
<input type="submit" value="Submit">
</form>
<p><em>Note: You cannot enter a value greater than 120.</em></p>
</body>
</html>
The input field restricts values to a maximum of 120. Users cannot type or select values beyond this limit −
Age Input with Max Limit Enter your age (max 120): [25] [Submit] Note: You cannot enter a value greater than 120.
Example − Range Input with Max Value
Following example shows the max attribute with range slider −
<!DOCTYPE html>
<html>
<head>
<title>Max Attribute - Range Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Volume Control</h2>
<form>
<label for="volume">Volume Level (0-100):</label><br><br>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
<span id="volumeValue">50</span>
</form>
<script>
const slider = document.getElementById('volume');
const output = document.getElementById('volumeValue');
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
The range slider is limited to values between 0 and 100, as defined by the min and max attributes −
Volume Control Volume Level (0-100): [----?----] 50
Using Max Attribute with Meter Element
The <meter> element uses the max attribute to define the upper bound of the measurement range. This is particularly useful for displaying gauges, progress indicators, or measurement data.
Example
Following example demonstrates the max attribute with meter elements −
<!DOCTYPE html> <html> <head> <title>Max Attribute - Meter Element</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>System Performance Metrics</h2> <p>CPU Usage: <meter min="0" low="30" high="80" max="100" value="45">45%</meter> 45%</p> <p>Memory Usage: <meter min="0" low="40" high="85" max="100" value="72">72%</meter> 72%</p> <p>Disk Space: <meter min="0" low="50" high="90" max="100" value="35">35%</meter> 35%</p> <p>Network Speed: <meter min="0" max="1000" value="450">450 Mbps</meter> 450 Mbps</p> </body> </html>
Each meter shows different performance metrics with their maximum values defined by the max attribute −
System Performance Metrics CPU Usage: [??????????] 45% Memory Usage: [??????????] 72% Disk Space: [??????????] 35% Network Speed: [??????????] 450 Mbps
Using Max Attribute with Progress Element
Example
Following example shows the max attribute with progress bars −
<!DOCTYPE html> <html> <head> <title>Max Attribute - Progress Element</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Download Progress</h2> <p>File 1: <progress value="30" max="100">30%</progress> 30%</p> <p>File 2: <progress value="65" max="100">65%</progress> 65%</p> <p>File 3: <progress value="90" max="100">90%</progress> 90%</p> <p>Custom Scale: <progress value="15" max="50">30%</progress> 15 out of 50</p> </body> </html>
The progress bars display completion status with different maximum values −
Download Progress File 1: [????????????????????] 30% File 2: [????????????????????] 65% File 3: [????????????????????] 90% Custom Scale: [????????????????????] 15 out of 50
Date Input with Max Attribute
Example
Following example demonstrates the max attribute with date inputs −
<!DOCTYPE html>
<html>
<head>
<title>Max Attribute - Date Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration</h2>
<form>
<label for="eventdate">Select event date (max: December 31, 2024):</label><br><br>
<input type="date" id="eventdate" name="eventdate"
min="2024-01-01" max="2024-12-31" value="2024-06-15">
<input type="submit" value="Register">
</form>
<p><em>Note: You cannot select dates beyond December 31, 2024.</em></p>
</body>
</html>
The date input restricts selection to dates before or on December 31, 2024 −
Event Registration Select event date (max: December 31, 2024): [06/15/2024] [Register] Note: You cannot select dates beyond December 31, 2024.
Comparison of Max Attribute Usage
| Element | Purpose | Value Type | Example |
|---|---|---|---|
| input type="number" | Limit numeric input | Number | max="100" |
| input type="range" | Set slider maximum | Number | max="50" |
| input type="date" | Restrict date selection | Date string | max="2024-12-31" |
| meter | Define gauge upper bound | Number | max="100" |
| progress | Set progress scale maximum | Number | max="100" |
Conclusion
The max attribute is essential for defining upper limits in HTML forms and display elements. It provides both client-side validation for input elements and scale definition for meter and progress elements. Always combine max with appropriate min values to create meaningful ranges for user interaction and data visualization.
170 Views
