HTML 属性: min

min 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 (value) がこれより小さい場合、その要素は制約検証に失敗します。この値は、max 属性の値以下でなければなりません。

入力欄の種類によっては既定の最小値があるものもあります。入力欄に既定の最小値がなく、 min に有効な数値に変換できない値が指定された場合(あるいは最小値が設定されなかった場合)、その入力には最小値が設定されません。

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

構文

min の構文(入力 type 別)
入力型 構文
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 の擬似クラスに一致するようになります。

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

<meter> 要素における min 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 (max 属性) よりも小さくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。

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

step への影響

minstep の値は、 step 属性がない場合も含め、どの値が有効であるかを定義します。 step の既定値は 0 です。

無効な入力の周囲に太く赤い境界を追加します。

css
input:invalid {
  border: solid red 3px;
}

それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。

html
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8" />

step の既定値は 1 なので、有効な値は 7.2, 8.2, 9.2, などになります。 8 の値は有効ではありません。無効な値が入っているので、対応しているブラウザーは値が無効であることを表示します。

明示的に含まれていない限り、 numberrange では step は既定値の 1 となり、 date/time 入力型では 1 単位 (秒, 週, 月, 日) となります。

アクセシビリティの考慮

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

仕様書

Specification
HTML Standard
# attr-input-min
HTML Standard
# attr-meter-max

ブラウザーの互換性

html.elements.input.min

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

html.elements.meter.min

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報