HTML

<input type="number">

　input要素の type属性で type="number" を指定すると、 数値の入力欄が作成されます。

<input type="number">

　name属性は入力欄に名前を付ける属性ですが、form要素でデータが送信される際、name属性で指定した名前と、入力された値が一組になって送信されます。

　ユーザーは空文字を入力することができます。 入力必須にする場合には、required属性を併用してください。

　type="number" の場合、step属性の初期値は 1 となります。

type="number" の場合に指定可能な属性

name属性

フォーム部品に名前をつける。

value属性

入力欄に初期値（既定値）を設定する。

Sample:

Sample: <input type="number" value="42">

autocomplete属性

入力候補を提示して入力内容を自動補完する機能の使用有無。（on, off, default）（初期値は default）

list属性

ユーザーに入力候補として提案するデータリストの要素を、その要素の id属性の値で指定する。

max属性

入力できる最大値を指定する。

min属性

入力できる最小値を指定する。

disabled属性

入力の無効化。

readonly属性

ユーザーによるテキスト編集を不可にして読み取り専用にする。（readonly）

form属性

送信するフォームを関連付ける。

autofocus属性

フォーカス（カーソル）を設定する。

placeholder属性

入力ヒントの表示。

Sample:

Sample: <input type="number" placeholder="入力してください">

required属性

入力必須にする。

step属性

入力欄で刻むステップ値を指定する。（type="number"の場合、初期値は 1）

Sample1:
Sample2:
Sample3:

Sample1: <input type="number"><br>
Sample2: <input type="number" step="0.1"><br>
Sample3: <input type="number" step="10">

この部品タイプに対応しているブラウザでは、スピナー（上下ボタン）を使って数値を入力すことができます。step属性の初期値が「1」なので、通常は、スピナー（上下ボタン）を使うと「1」ずつ数値が変わりますが、この step属性での設定値に応じてスピナーを使ったときの数値の変化が変わります。

type="number" 使用時の注意点

　フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々ありますが、数字を使っているからといってむやみに <input type="number">要素を使うと問題が起きることがあるようです。

数字であって数値でない場合はNG

　<input type="number"<要素は増えたり減ったりする数値に使うべきであって、クレジットカード番号のような 1桁違うだけで正しくなくなってしまう数値には適していないようです。

　<input type="number"> 要素を使うと、ブラウザによりますが、上矢印と下矢印の UIがデフォルトで表示されますので、この UIを使う場合があるかどうかが判断基準となります。

　また、キーボードの上矢印キーと下矢印キーで数値の増減ができるため、クレジットカード番号に <input type="number">要素を使ってしまうと、誤って矢印キーに触れてしまった場合に値が変化してしまう恐れもあります。

大きな値は指数表記になる

　桁数が多くなると、e+26 のような指数表記になってしまいます。

　一度、指数表記に変換されてしまうと、矢印キーで値の増減が出来なくなります。実際に18桁を超えるような数値を入力することはないかもしれませんが、期待されている動作と違うことは確かです。

Browser support