<input type="number">

　<input type="number">は、数値に限定した入力ができる input のタイプです。FORM エレメント使用してサーバーにデータが送信できます。
　最大値と最小値が設定できます。

<label>数値<input type="number" value="" /></label>

表示例

数値

　<label> エレメントによって項目名や説明を付けることができます。

　CSS、スタイルシートを利用して入力値を検証するには:in-range、:out-of-rangeクラスを使います。
　入力値の範囲によって自動的にスタイルを反映します。

　送信時に入力内容をチェックするは、oninvalid イベントハンドラーを利用します。最小値、最大値があっているか、required 属性が指定しているかを設定することができます。

　数値の右寄せ、３桁ごとのカンマ,、桁合わせについては数値の書式を、上下ボタンを非表示にするには上下ボタンの非表示を参照してください。

属性

　グローバル属性も持ちます。以下に主な属性のみを示します。

　ここでは送信するという前提でnameパラメーターは付けるようにしています。送信したくないデータにはnameパラメーターを付けない方法があります。

Attribute	Value	Extra information
type		扱うデータタイプまたはinputタグの形状
name		＊必須。データ送信のための属性です。
value		初期値または設定値
id		cssにも使えます。エレメントをユニークとします。
class		cssに使います。同名のclassは同じスタイルが適応されます。
max		最大値。入力範囲の最大値。
min		最小値。入力範囲の最小値。
step		入力値の間隔。

入力項目名

ブラウザでの見え方（このページのスタイルが反映されています）

数値の書式

　デフォルトの <input> では左寄せで表示され、等幅フォントではないため桁合わせが上手くいきません。さらには３桁ごとのカンマ,も表示されません。

　一般的に、多くの数値は右寄せで桁が合うように表示されます。右寄せに表示するには CSS でtext-align: right;を使用します。
　さらに桁を合わせて表示するにはフォントをfont-family プロパティで等幅フォントにします。これらのことを CSS のセレクターでinput type="number"に対して反映するようにします。

右寄せと等幅フォントの指定

input[type="number"]{
	text-align: right;
	font-family: "Courier New","Monaco","Osaka-Mono","Consolas",monospace;
}

　３桁区切りにおいては、JavaScript と <input type="text"> を使って３桁区切りに表示する方法があります。しかし、サーバーにデータを送る段階で数値に戻す必要が出てきます。サーバー送信までを考えると、テキストとして３桁区切りで表記しないで type="number" のままで扱った方が無難です。
　詳しくは数値の書式についてを参照してください。

上下ボタンの非表示

　数値を入力の補助をする右側に表示される上下ボタン（スピンボタン）を非表示にするには以下のようにスタイル宣言をします。

上下ボタンの非表示

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
  -moz-appearance:textfield;
}

実行結果

数値

<input type="number">

属性

数値の書式

上下ボタンの非表示

関連typeについて

関連（Related）