HTML
この記事では、数値を入力するフォーム部品<input type="number">の基本と、min・maxなどで範囲を制限する方法を説明します。
<input type="number">
input要素の type属性で type="number" を指定すると、 数値の入力欄が作成されます。
HTML source
<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
