HTML max Attribute

Introduction

The max attribute sets the maximum allowed value on certain <input> types and defines the upper bound of the scale on <meter> and <progress> elements. It is essential for form validation—capping quantities, limiting date pickers, and constraining range sliders. Pair it with min to define a valid range. Do not confuse max with maxlength (character count on text inputs) or high on <meter> (warning threshold, not the scale limit).

What You’ll Learn

Purpose of max Attribute

The primary purpose of the max attribute is to define the highest value a user may enter or select. On a number field, it prevents quantities above a business rule (e.g. stock on hand). On a date field, it blocks dates after a deadline. On a range slider, it sets the right end of the track.

Browsers use max (with min and step) for constraint validation. When the value exceeds max, the input is invalid and :invalid styling or checkValidity() reflects the error. This improves UX but must be repeated on the server for security.

📝 Syntax

Add max to supported input types (often with min):

<label for="qty">Quantity:</label>
<input type="number" id="qty" min="1" max="100">

<label for="eventDate">Event date:</label>
<input type="date" id="eventDate" max="2025-12-31">

<label for="closing">Closing time:</label>
<input type="time" id="closing" max="18:00">

<input type="range" min="0" max="500" value="250">

Syntax Rules

• Value format depends on type: number/range use numeric strings; date uses YYYY-MM-DD; time uses HH:MM or HH:MM:SS.
• datetime-local uses YYYY-MM-DDTHH:MM (e.g. 2025-12-31T23:59).
• Ensure min ≤ max when both are set.
• On <meter> and <progress>, max defines the scale upper bound (default often 1 or 100).
• Not valid on type="text", checkbox, radio, etc.—use maxlength for text length.
• JavaScript: input.max = "100" (string) on HTMLInputElement.

💎 Values

The max attribute accepts a string whose format matches the control type:

• Number / range — max="100", max="3.5" (valid floating-point string).
• Date — max="2025-12-31" (YYYY-MM-DD).
• Time — max="18:00" or max="18:00:00".
• Datetime-local — max="2025-12-31T23:59".
• Month — max="2025-12"; Week — max="2025-W52".
• Meter / progress — max="100" sets the top of the scale (meter also uses high for warning zones).

document.getElementById("ticketPrice").max = "500";
document.getElementById("dynamicMaxField").setAttribute("max", "1000");

Applicable Elements

max vs min vs maxlength vs meter high

Examples Gallery

Number input cap, date deadline, and dynamic max on a range slider with JavaScript.

<label for="ticketPrice">Ticket price ($):</label>
<input
  type="number"
  id="ticketPrice"
  name="ticketPrice"
  min="0"
  max="500"
  step="0.01">

<form>
  <label for="eventDate">Event date:</label>
  <input type="date" id="eventDate" max="2025-12-31">

  <label for="ticketPrice">Ticket price:</label>
  <input type="number" id="ticketPrice" max="500">

  <button type="submit">Submit</button>
</form>

<input type="range" id="price" min="0" max="500" value="250">

<script>
  document.getElementById("price").max = "1000";
</script>

♿ Accessibility

• Pair labels with inputs — Use <label for="id"> so users know what the max limit applies to.
• Describe limits in help text — State the allowed range visibly (e.g. “1–100”) for screen reader users and sighted users alike.
• Do not rely on color alone — Invalid states should include text or aria-invalid when you enhance validation with JavaScript.
• Announce dynamic max changes — If JavaScript lowers max, consider an aria-live region explaining the new limit.
• Server validation for everyone — Assistive technology users deserve the same enforced limits as sighted users; client max alone is insufficient.

💡 Best Practices