HTML 属性: max
max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 (value) がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min 属性の値以上でなければなりません。 max 属性が指定されていないか無効であった場合、 max 値は適用されません。 max 属性が有効で、値が空でなく、 max 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。
これは数値入力型、例えば date, month, week, time, datetime-local, number, range 型や <progress> および <meter> 要素で有効であり、 max 属性はフォームコントロールで妥当と見なされる最も大きな値を指定する数値です。
値が許容される最大値を超えた場合、 validityState.rangeOverflow が true となり、そのコントロールは :out-of-range および :invalid 擬似クラスに一致するようになります。
構文
| Input type | Syntax | Example |
|---|---|---|
| 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 となります。
| 入力型 | 構文 | 例 |
|---|---|---|
<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 Standard # the-min-and-max-attributes |
| HTML Standard # attr-meter-max |
| HTML Standard # attr-progress-max |
ブラウザーの互換性
html.elements.input.max
BCD tables only load in the browser
html.elements.meter.max
BCD tables only load in the browser
html.elements.progress.max
BCD tables only load in the browser