[49-5] input要素で「数」を入力してもらおう (number)

<input type="number">で「数値」を入力するフォーム部品を作りましょう。
これもHTML5からの新しいtype属性の値です。
対応ブラウザでは、スピンボタン（ ）が出て、数値をチョイスできます。

	type属性の値	部品の役割
<input>要素で作る 「数値」入力の部品	type="number"　 new	数値の入力

ほかの属性で機能を追加できます

type属性以外の属性も使って、さらに機能を追加できます。
（各属性については、それぞれのリンクで詳細をご覧ください。）

• min属性で、最小値を設定する（時間と数の部品にのみ使える属性）
• max属性で、最大値を設定する（時間と数の部品にのみ使える属性）
• step属性で、入力の段階（ステップ）を制限する（時間と数の部品にのみ使える属性）
• required属性で「必須項目」にする（未記入だと送信不可のバリデート）
• list属性で、選択肢を表示する（<datalist>要素を併用します）
• autofocus属性で、HTML文書のロード後すぐに「フォーカス（記入のための選択）」する
• form属性で <form>要素の外に出してレイアウトする
• autocomplete属性で「オートコンプリート（履歴から入力予測する）」機能の指定をする
• readonly属性で「読み取り専用」にする
• disabled属性で「使用不可」にする

type="number" の対応ブラウザは…

<input type="number>は、Chrome, Safari が対応。
（2017年12月記 / 参考：Can I use | Number input type）

IE 11, Eege は、スピンボタン（ ）がありませんが、Eege は代わりに矢印キーで上下に変更できるようです。
Firefox は、<datalist>要素が number だと使えない。
モバイル用は、iOS Safari も Android, Android Chrome も、スピンボタンが出ず、step, min, max属性に反応しません。
Opera Mini は完全に未対応。

type="number" で「数値」を入力してもらおう

数値（number）専用の入力部品なので「注文の個数」、アンケートで「年齢」など、ユーザーに 数値 を書いて欲しい場合に使います。
＊同じ数値でも、電話番号なら type="tel" を使おう。

下記のような決まりがあります。

• デフォルトは整数です。
• 負の数値はマイナス（-）をつけます。
• 小数点以下の数値も使えます。この場合 step属性で指定する必要あり。コレ重要。
  step属性無しだと、デフォルトが整数なので小数をチョイスできず、直接入力してもらっても送信できません。
  例えば小数点以下3位まで書いて欲しい場合は、step="0.001" とか step="0.025" とかにします。
• step属性を書かなければ初期値は 整数1ずつのステップ。

min, max, step属性と一緒に使う

サンプルを見てみましょう。（PCブラウザのみ = Edge, Chrome, Safari, Firefox）

min属性で最小値を10、max属性で最大値を200に指定しています。
step属性は10にしました。step属性を書かなければ初期値は1ずつのステップです

＊10〜200枚まで10枚単位で承ります。 ご希望枚数：

<form class="sample">
<span>＊10〜200枚まで10枚単位で承ります。</span>
  <label>ご希望枚数：
  <input type="number" name="num1" min="10" max="200" step="10" required></label>
  <input type="submit" value="送信">
</form>

step属性で指定した 10の倍数以外の数値を 手入力で 入力すると、アラートが出ます。

min属性、max属性で指定した最小値〜最大値の範囲内でなければ、これもアラートが出て送信できません。

required属性も指定したので、何も入力せずに送信ボタンを押すとアラートが出ます。

小数点以下の数値を入力させる

小数点以下まで書いて欲しい場合は、step属性を使います。
サンプルでは、step属性を「0.1」と指定しています。
また、マイナスの数値も入力範囲にしています。

＊-5.2から+3.2（小数点以下1位まで）の数値を入力してください。 数値入力：

<form class="sample">
  <span>＊-5.2から+3.2（小数点以下1位まで）の数値を入力してください。</span>
  <label>数値入力：
  <input type="number" name="num2" min="-5.2" max="3.2" step="0.1" required></label>
  <input type="submit" value="送信">
</form>

step属性で指定したステップ以外で入力して送信ボタンを押すと、アラートが出て送信できません。（3などと整数で入力した場合は送信できます。3.0なので）

list属性を一緒に使う

list属性を使って（<datalist>要素も併用）数値をリストで出すことができます。
（▲Firefoxは number で <datalist>に反応しません）

＊100, 250, 500枚のいずれかをお選びください。 ご希望枚数：

<form class="sample">
  <span>＊100, 250, 500枚のいずれかをお選びください。</span>
  <label>ご希望枚数：
  <input type="number" name="num3" min="100" max="500" list="numlist" required>
  <datalist id="numlist">
    <option value="100"></option>
    <option value="250"></option>
    <option value="500"></option>
  </datalist></label>
  <input type="submit" value="送信">
</form>

対応ブラウザは、ダブルクリックでリストが現れ、選択できます。

このサンプルでは、step属性を使っていないので、例えば「260」枚と手入力しても送信できちゃいます。
ステップで扱えないセットを選択してほしいなら、ラジオボタンなどを使ったほうが良さそうです。（ラジオボタンなら対応ブラウザも多いですし）

ご希望枚数： 100枚 250枚 500枚

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「数の入力」の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

次回は、レンジ（割合）を選んでもらうための、<input type="range">を使ってみましょう。
これもHTML5からの新しい値です。
対応ブラウザでは、スライダーが表示され、レンジを選んで送信してもらえます。