HTML 属性: min
min 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 (value) がこれより小さい場合、その要素は制約検証に失敗します。この値は、max 属性の値以下でなければなりません。
入力欄の種類によっては既定の最小値があるものもあります。入力欄に既定の最小値がなく、 min に有効な数値に変換できない値が指定された場合（あるいは最小値が設定されなかった場合）、その入力には最小値が設定されません。
これは数値入力型、例えば date, month, week, time, datetime-local, number, range 型や <meter> 要素で有効であり、 min 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。
構文
| 入力型 | 構文 | 例 |
|---|---|---|
| date | yyyy-mm-dd |
<input type="date" min="2019-12-25" step="1"> |
| month | yyyy-mm |
<input type="month" min="2019-12" step="12"> |
| week | yyyy-W## |
<input type="week" min="2019-W23" step=""> |
| time | HH:mm |
<input type="time" min="09:00" step="900"> |
| datetime-local | yyyy-mm-ddTHH:mm |
<input type="datetime-local" min="2019-12-25T19:30">
|
| 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 の擬似クラスに一致するようになります。
詳しくは クライアント側検証と rangeUnderflow を参照してください。
<meter> 要素における min 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 (max 属性) よりも小さくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。
step への影響
min と step の値は、 step 属性がない場合も含め、どの値が有効であるかを定義します。 step の既定値は 0 です。
無効な入力の周囲に太く赤い境界を追加します。
input:invalid {
border: solid red 3px;
}
それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8" />
step の既定値は 1 なので、有効な値は 7.2, 8.2, 9.2, などになります。 8 の値は有効ではありません。無効な値が入っているので、対応しているブラウザーは値が無効であることを表示します。
明示的に含まれていない限り、 number、 range では step は既定値の 1 となり、 date/time 入力型では 1 単位 (秒, 週, 月, 日) となります。
アクセシビリティの考慮
ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 min 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 <label> 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby または aria-describedby を使用することを検討してください。
仕様書
| Specification |
|---|
| HTML # attr-input-min |
| HTML # attr-meter-max |
ブラウザーの互換性
html.elements.input.min
Loading…
html.elements.meter.min
Loading…