Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
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
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • ユーザーが数字以外の内容を入力できないようにする。
注釈 1件
実装メモ
  • value`に空文字列を反映させることで、ユーザーが数値以外の内容を入力できるようにする。
注釈 1件
実装メモ
  • value`に空文字列を反映させることで、ユーザーが数値以外の内容を入力できるようにする。
注釈 1件
実装メモ
  • ユーザーが数字以外の内容を入力できないようにする。
注釈 1件
実装メモ
  • value`に空文字列を反映させることで、ユーザーが数値以外の内容を入力できるようにする。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 特定のUIを持たない。バグ835773を参照。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 特定のUIを持たない。バグ835773を参照。

基本構文

HTML
<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>

ライブデモ

Numberinput

Number type in spinner with. Numberinputfield provide.

プレビュー全画面表示

numberamountselekta-

Number input ka-t style. numberamountselectionUI and usage.

プレビュー全画面表示

Step attribute. Compare Usage

width control.alignnumber, number, specific. step. with step

プレビュー全画面表示

実務での使いどころ

  • <input type="number"> の活用

    max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。