The HTML max attribute
The HTML max attribute sets the upper limit of a number, date, time or range input. With max="6" on a number field, a larger value fails validation and the form won't submit. A range slider moves a larger value back to max instead.
Overview
The HTML max attribute sets the highest value a form control accepts. It works on <input> fields of type number, range, date, month, week, time and datetime-local. Text fields ignore it. Desktop Firefox and Safari don't support the month and week types.
A value above max fails constraint validation. The field's validity.rangeOverflow property turns true, the :invalid and :out-of-range pseudo-classes match, and the form won't submit. A value equal to max passes, and so does an empty field.
The format of max follows the input type. A number or range input takes a number such as 6 or 2.5, a date input a date such as 2026-12-31, and a time input a time such as 17:30. If max isn't in that format, the browser ignores it.
An ignored max leaves a number or date field with no upper limit, but a range slider falls back to 100, its default. As long as max is at or above min, a slider never reports an overflow. It moves a larger value down to max, or to the nearest step below max.
On <progress>, max is the total amount of work and must be above zero. On <meter>, it is the top of the gauge. Both use 1 when max is missing.
Syntax
<label for="qty">Tickets (1 to 6)</label>
<input type="number" id="qty" name="qty" min="1" max="6">Values
| Value |
|---|
| A number, or a date or time string in the input type's format. |
Example
<form id="booking">
<p>
<label for="qty">Tickets (1 to 6)</label>
<input type="number" id="qty" name="qty" min="1" max="6" value="7">
</p>
<p>
<label for="day">Date (before 2027)</label>
<input type="date" id="day" name="day" max="2026-12-31">
</p>
<button>Check</button>
<p id="msg" role="status"></p>
<p>Press Check, then change Tickets to 6 and press it again.</p>
</form>
<script>
const form = document.getElementById('booking');
const msg = document.getElementById('msg');
form.addEventListener('invalid', function (e) {
if (e.target === form.querySelector(':invalid')) {
msg.textContent = e.target.labels[0].textContent + ': ' + e.target.validationMessage;
}
}, true);
form.addEventListener('submit', function (e) {
e.preventDefault();
msg.textContent = 'No value is above its max.';
});
</script>Best practices
- Write a date max as year-month-day, such as 2026-12-31. Written as 12/31/2026, the same max is invalid and the field gets no upper limit.
- Keep
maxat or above min on number and date inputs. - Choose a max you can reach from min in whole steps, such as
min="1",step="3"andmax="10". When max falls between step values,stepUp()stops at the last step below it, and in Chrome the arrow keys do too. - Repeat the upper-limit check on the server. Anyone can delete the max attribute in developer tools or send the request without the form.
Accessibility
State the max value before people start typing, as in "Tickets (1 to 6)". A note inside the <label> may be enough, or you can tie a separate hint to the field with aria-describedby. Otherwise people may learn the limit only from the error after the form fails to submit.
