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

最終更新日:2018年01月31日  (初回投稿日:2013年04月05日)

<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」枚と手入力しても送信できちゃいます。
ステップで扱えないセットを選択してほしいなら、ラジオボタンなどを使ったほうが良さそうです。(ラジオボタンなら対応ブラウザも多いですし)

ご希望枚数:

<input>要素の 索引ページ

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

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

次回予告

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.