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

最終更新日:-0001年11月30日  (初回投稿日: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 が全勝。サンプルは Chrome で見てください。
Opera は、list属性だけダメでしたので、まあまあ。
Firefox は、スピンボタン( スピンボタン )出ず手入力だけ。min, max, step属性も無効。list属性は有効。
Safari は、Win版は全敗。Mac版は min, max属性は効いてるけど、list属性を使うとダメ。

<input type="datetime>などの「時間」関係の部品と同じように、
ブラウザごとの対応がまちまちです。こちらも過渡期です。
ただ、Chrome が完全対応してるので、まだマシ。(2013年4月記)

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

文字通り、数値(number)用の入力部品です。
注文の個数、アンケートで年齢など、ユーザに書いて欲しい内容が 数値 の場合に使います。
同じ数値でも、年月日なら type="datetime" など時間に関する部品を、 電話番号なら type="tel" を使いましょう。

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

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

では、サンプルを見てみましょう。(Chromeで見てね)

●サンプル1
name属性で部品名をつけます。
min属性で最小値(ここでは10)、max属性で最大値(ここでは500)を指定しています。
step属性はここでは10にしました。step属性を書かなければ初期値は1ずつのステップです。

<input type="number" name="num1" min="10" max="500" step="10" required>

対応ブラウザでは、スピンボタン( スピンボタン )でチョイスでき、10ステップずつ、10から500までの範囲で値を上下できました。
左はChrome (on Mac) でのプレビューです。
(クリックでサンプルHTMLが開きます)

step属性で指定した10の倍数以外の数値を直接入力すると、アラートが出て送信できません。

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

サンプルは、required属性を指定しています。
何もしないで送信ボタンを押すとすると、アラートが出ます。

●サンプル2
小数点以下の数値を入力させるテストです。
小数点以下1位まで書いて欲しいので、step属性で「0.1」と指定しています。

<input type="number" name="num2" min="-5.2" max="3.2" step="0.1" required>

step属性で指定した範囲を越えて入力すると、アラートが出て送信できません。
3などと整数で入力した場合は送信できます。3.0なので。
(クリックでサンプルHTMLが開きます)

●サンプル3
list属性を使ってみました。(<datalist>要素も併用します。)

<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>
Crome と Firefox は、ダブルクリックでリストが現れ、選択できました。
Opera, Safari は、list属性は未対応のようです。
(2013年4月記)
(クリックでサンプルHTMLが開きます)

HTML5のフォームサンプル

HTML5での新要素を使ったフォームのサンプル。
今回の「数値」用の部品も使っています。
クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

HTML5からの新要素は、 OperaChromeがまあまあ対応。IE10 onWin8 も対応しているそうです。
Firefoxは部分的に対応。Safari はこれから。
(2013年4月記)

次回予告

次回は、レンジ(割合)を選んでもらうための、<input type="range">を使ってみましょう。
これもHTML5からの新しい値です。
対応ブラウザでは、スライダーが表示され、レンジを選んで送信してもらえます。
上記サンプルの「アンケートにお答えください」→「当店のサービスについて」で使用しています。
(Chrome か Opera で確認してみてください)

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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