max
属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値
がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min
属性の値以上でなければなりません。 max
属性が指定されていないか無効であった場合、 max
値は適用されません。 max
属性が有効で、値が空でなく、 max
属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。
これは数値入力型、例えば date, month, week, time, datetime-local, number, range 型や <progress>
および <meter>
要素で有効であり、 max
属性はフォームコントロールで妥当と見なされる最も大きな値をして逸する数値です。
値が許容される最大値を超えた場合、 validityState.rangeOverflow
が true となり、そのコントロールは :out-of-range
および :invalid
擬似クラスと一致するようになります。
構文
入力型 | 構文 | 例 |
---|---|---|
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 となります。
入力型 | 構文 | 例 |
---|---|---|
<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
を使用することを検討してください。
仕様書
関連情報
step
min
- other meter attributes:
low
,high
,optimum
- Constraint validation
- Constraint validation API
validityState.rangeOverflow
:out-of-range
<input>