HTML max Attribute

HTML max Attribute

The HTML max attribute defines the maximum permitted value for certain input controls and establishes the upper bound for <meter> and <progress> elements.

Elements That Use the max Attribute

The max attribute is used with several types of <input> controls and with the <meter> and <progress> elements.

Using max with <input>

On a supported <input> element, the max attribute establishes the greatest value the control accepts. The required format depends on the input type.

<label for="quantity">Quantity (1–10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">

In this example, values greater than 10 exceed the maximum permitted value.

max Values for <input>

The format of the max value depends on the input type.

Using max with <meter>

On a <meter> element, the max attribute defines the upper numeric bound of the measured range. If max is omitted, the default maximum is 1.

<meter min="0" max="100" value="75">75%</meter>

The maximum must not be less than the minimum. The value, low, high, and optimum values must fall within the meter's defined range.

Using max with <progress>

On a <progress> element, the max attribute specifies the value that represents completion of the task. Its value must be a valid floating-point number greater than zero. If max is omitted, the default maximum is 1.

<progress max="100" value="70">70%</progress>

Here, 100 represents completion and the current value of 70 represents 70% progress.

max and min

For supported input controls and the <meter> element, min and max can work together to define the permitted range.

<input type="number" min="1" max="10">

In this example, the permitted numeric range extends from 1 through 10. The min value should not be greater than the max value.

Constraint Validation

For input types that support constraint validation, a value greater than the maximum can cause the control to fail validation. An out-of-range control can match the CSS :invalid and :out-of-range pseudo-classes.

<input type="number" min="1" max="10" value="15">

In this example, 15 exceeds the maximum of 10, so the control is outside its permitted range.

Common Mistakes

Do not use the same value format for every input type. A numeric input requires a number, while date and time controls require values in the format expected by that input type.

Do not confuse max with maxlength. The max attribute limits a value or range, while maxlength limits the number of characters that can be entered into supported text controls.

Do not set a <progress> element's max value to zero or a negative number. Its maximum must be greater than zero.

When using max on <meter>, make sure the related min, low, high, optimum, and value settings describe a valid range.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The max attribute is widely supported on applicable input types and on the <meter> and <progress> elements. Compatibility for individual input types can differ because the controls themselves have different browser support histories.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the max Attribute

The example uses min="1" and max="10" to define the permitted range for a number input. Try entering a value greater than 10 and submit the form to see the browser's built-in validation.

Summary

The HTML max attribute establishes a maximum value for supported <input> controls and defines the upper bound for <meter> and <progress> elements. Its required value and behavior depend on the element or input type where it is used.