The HTML max attribute specifies the maximum value acceptable for an element's value.
Definition and Usage
➔ The max attribute is used for validation on the <input> element, if the user enters a value greater than the max value, the form validation will fail.
➔ The max attribute can be used on these input elements: number, range, date, month, week, time, datetime-local.
➔ For the <progress> element, the max attribute specifies the total value of a task.
➔ For the <meter> element, the max attribute specifies the upper numerical limit of the range.
Syntax
//In HTML
<label for="marks">Marks (max 100):</label>
<input type="number" id="marks" name="marks" max="100" min="0"><br><br>
<label for="downloading">Downloading progress:</label>
<progress id="downloading" value="50" max="100"> 70% </progress><span id="downloadingvalue"></span> %<br><br>
<label for="cpuusage">CPU Usage:</label>
<meter id="cpuusage" value="52" min="0" max="100" low="50" high="90">30%</meter><span id="cpuusagevalue"> </span>%
//In JavaScript
<script>
let downloading = document.querySelector("#downloading");
let cpu = document.querySelector("#cpuusage");
//cpu.value=45;
//cpu.setAttribute("max","35")
</script>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| max | <input> <meter> <progress> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML max attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
</head>
<body>
<div class="mydiv">
<h3>HTML max attribute example</h3>
<p>The max attribute specifies the maximum value acceptable for an element.</p>
<label for="marks">Marks (max 100):</label>
<input type="number" id="marks" name="marks" max="100" min="0"><br><br>
<label for="downloading">Downloading progress:</label>
<progress id="downloading" value="50" max="100"> 70% </progress><span id="downloadingvalue"></span> %<br><br>
<label for="cpuusage">CPU Usage:</label>
<meter id="cpuusage" value="52" min="0" max="100" low="50" high="90">30%</meter><span id="cpuusagevalue">
</span>%
</div>
</body>
<script>
let downloading = document.querySelector("#downloading");
let cpu = document.querySelector("#cpuusage");
//cpu.value=45;
//cpu.setAttribute("max","35")
document.querySelector("#downloadingvalue").textContent = downloading.value;
document.querySelector("#cpuusagevalue").textContent = cpu.value;
</script>
</html>
Click on the "Try it Now" button to see how it works.