HTML 属性: max

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

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

値が許容される最大値を超えた場合、 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" min="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 を使用することを検討してください。

仕様書

関連情報