HTML 属性: max

max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 (value) がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min 属性の値以上でなければなりません。 max 属性が存在していても、指定されていないか無効であった場合、 max 値は適用されません。 max 属性が有効で、値が空でなく、 max 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。

max 属性は、数値入力型、例えば date, month, week, time, datetime-local, number, range 型や <progress> および <meter> 要素で有効です。フォームコントロールで妥当と見なされる最も大きな値を指定する数値です。

値が許容される最大値を超えた場合、 validityState.rangeOverflow が true となり、そのコントロールは :out-of-range および :invalid 擬似クラスに一致するようになります。

構文

max の構文(入力 type 別)
入力型 構文
date yyyy-mm-dd <input type="date" max="2019-12-25" step="1">
month yyyy-mm <input type="month" max="2019-12" step="12">
week yyyy-W## <input type="week" max="2019-W23" step="">
time HH:mm <input type="time" max="17:00" step="900">
datetime-local yyyy-mm-ddTHH:mm <input type="datetime-local" max="2019-12-25T23:59">
number <number> <input type="number" min="0" step="5" max="100">
range <number> <input type="range" min="60" step="5" max="100">

メモ: ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 :invalid:out-of-range の擬似クラスに一致するようになります。

詳しくは クライアント側検証rangeOverflow を参照してください。

<progress> 要素における max 属性は、 progress 要素で示されたタスクの作業の必要量を記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 <meter> 要素における max 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値(min 属性)よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。

その他の要素における max 値の構文
入力型 構文
<progress> <number> <progress id="file" max="100" value="70"> 70% </progress>
<meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>

アクセシビリティの考慮

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 max 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 <label> 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby または aria-describedby を使用することを検討してください。

仕様書

Specification
HTML
# attr-input-max
HTML
# attr-meter-max
HTML
# attr-progress-max

ブラウザーの互換性

html.elements.input.max

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
max

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.meter.max

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
max

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

html.elements.progress.max

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
max

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報