<input type="number">
max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 (value) がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min 属性の値以上でなければなりません。 max 属性が存在していても、指定されていないか無効であった場合、 max 値は適用されません。 max 属性が有効で、値が空でなく、 max 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。
max 属性は、数値入力型、例えば date, month, week, time, datetime-local, number, range 型や <progress> および <meter> 要素で有効です。フォームコントロールで妥当と見なされる最も大きな値を指定する数値です。
値が許容される最大値を超えた場合、 validityState.rangeOverflow が true となり、そのコントロールは :out-of-range および :invalid 擬似クラスに一致するようになります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 16 | 5 | 18 | 4 | |
| HTML 属性 | ||||||
| max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 (value) がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min 属性の値以上でなければなりません。 max 属性が存在していても、指定されていないか無効であった場合、 max 値は適用されません。 max 属性が有効で、値が空でなく、 max 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。 | 4 | 12 | 16 | 5 | 18 | 4 |
| min 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 (value) がこれより小さい場合、その要素は制約検証に失敗します。この値は、max 属性の値以下でなければなりません。 | 4 | 12 | 16 | 5 | 18 | 4 |
| step 属性は、が従わなければならない刻み値を指定する数値、またはキーワード any です。数値の入力型、たとえば input/date, input/month, input/week, input/time, input/datetime-local, input/number, input/range 型に有効です。 | 5 | 12 | 16 | 5 | 18 | 4 |
| input 要素の number 型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。 | 7 | 12 | 29 | 5.1 | 18 | 5 |
| DOM API | ||||||
| min は HTMLInputElement インターフェイスのプロパティで、この input 要素の min 属性を反映します。この属性は通常、数値または日付時刻入力の有効な最小値を定義します。この属性が明示的に設定されていない場合、min プロパティは空文字列となります。 | 4 | 12 | 16 | 5 | 18 | 4 |
| step は HTMLInputElement インターフェイスのプロパティで、数値または日付時刻の input 要素が変更できる刻みを示します。これは、要素の step 属性を反映します。有効な値は、文字列 "any" または正の浮動小数点数の入った文字列です。属性が明示的に設定されていない場合、step プロパティは空文字列となります。 | 5 | 12 | 16 | 5 | 18 | 4 |
| HTMLInputElement.stepDown([n]) メソッドは、数値型の input 要素の値を step 属性の値、または引数として数値が渡された場合は step 属性の最大 n 倍の値だけ減少させるものです。 | 5 | 12 | 16 | 5 | 18 | 4 |
| HTMLInputElement.stepUp() メソッドは、数値型の input 要素の値を step 属性の値、または step 属性が明示的に設定されていない場合は既定の step の値だけ増加させるものです。このメソッドを呼び出すと、 value は (step \* n) だけ減少します。ここで、n は指定されなかった場合、既定で 1 となり、step が指定されなかった場合、 step の既定値となります。 | 5 | 12 | 16 | 5 | 18 | 4 |
| valueAsNumber は HTMLInputElement インターフェイスのプロパティで、input 要素の現在の値を数値として表します。数値への変換が不可能な場合は NaN として表されます。 | 5 | 12 | 16 | 5 | 18 | 4 |
- ユーザーが数字以外の内容を入力できないようにする。
- value`に空文字列を反映させることで、ユーザーが数値以外の内容を入力できるようにする。
- value`に空文字列を反映させることで、ユーザーが数値以外の内容を入力できるようにする。
- ユーザーが数字以外の内容を入力できないようにする。
- value`に空文字列を反映させることで、ユーザーが数値以外の内容を入力できるようにする。
- このブラウザでは部分的にしか実装されていません
- 特定のUIを持たない。バグ835773を参照。
- このブラウザでは部分的にしか実装されていません
- 特定のUIを持たない。バグ835773を参照。
基本構文
<label>Quantity:
<input type="number" min="1" max="99" step="1" value="1">
</label>
<label>Price:
<input type="number" min="0" step="0.01" placeholder="0.00">
</label> ライブデモ
実務での使いどころ
-
<input type="number"> の活用
max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。