[49-6] input要素で「レンジ(割合)」を選んでもらおう(range)

<input type="range">で「レンジ(割合)」を選んでもらう部品を作りましょう。
レンジとは、ある一定範囲内の割合とか、度合いのこと。
例えば、「満足度は何%ですか?」とか、「-5から+5までで、どのあたりですか?」など、範囲を決めて、その中での割合を選んでもらう場合に使います。
これもHTML5からの新しいtype属性の値です。

対応ブラウザなら、スライダーが現れて選択できるようになってます。
これはChrome (on Mac) のプレビュー。

  type属性の値 部品の役割
<input>要素で作る
「レンジ」入力の部品
type="range"  new レンジ (割合) の入力

rangeはスライダーで選ぶせいか、わりと大ざっぱな答えを得る ための部品みたいです。

レンジの範囲はデフォルトで0から100、初期値は50。範囲を min属性と max属性 で指定すると、デフォルトの初期値は範囲のど真ん中になります。
で、ユーザが何もチョイスしなくて、value属性 (初期値) を何も指定してなくても、とにかくこの初期値で送っちゃう(せめて空欄で送って欲しいよな)
なので、ちゃんとした答えが欲しい時には他の部品を使うほうがイイかもね。

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

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

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

required属性、readonly属性は使えません。

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

<input type="range>は、Chrome が全勝。サンプルは Chrome で見てください。
Opera は、Win版は全勝で優秀。Opera Mac版は list属性に未対応でした。
Safari はけっこう頑張ってて、スライダーは出るしmin, max, stepもOK。list属性のみ未対応。
Firefox は残念、未対応。テキストフィールドになります。(list属性だけ反応しますが)
というわけで、これもまだ過渡期です。(2013年4月記)

type="range" で「レンジ (割合)」を入力してもらおう

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

  • デフォルトは、min="0" max="100" step="1" value="50" です。
    min, max, step, value属性なしでも、最小値0、最大値100、ステップは1、初期値が50になるってことです。
  • step属性で「step="any"」にすると、整数でなく小数点以下14位の微細な数まで選びます。
  • 初期値(value)のデフォルトは、範囲の真ん中になります。範囲を 0から10に指定すれば真ん中の 5 に。ただし、step属性を指定している場合、中間点がStepでチョイスできない場合は、その近似点が選ばれます。
  • 負の数値も使えます。マイナス(-)をつけて。
    min属性max属性、で範囲を指定する必要があります。(デフォルトが0, 100なので、それを上書きしなきゃってこと)
  • 小数点以下の数値も使えます。
    step属性でステップを指定する必要があります。(デフォルトが1 なので、それを小数用に上書きするってこと)例えば、小数点以下第2位までチョイスの対象にするなら、stepも0.01とか0.05などにしておきます。

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

●サンプル1
min, max, step, value属性を指定せず、全部デフォルト状態のサンプルです。
name属性で部品名だけつけています。(コレが無いと送信しても無駄なので必ずつけよう)

<label>悪い <input type="range" name="ex1"> 良い</label>

デフォルトで min=0, max=100, step=1。valueは範囲の真ん中なので、この場合「50」になってます。(送信してみるとURL?のあとにvalue値がつくのでわかります)
このように、何も指定しなくてもvalue値が送信できてしまうので、required属性、readonly属性が使えないんじゃないかと思います。(指定しても無駄だから)

これはOpera (12.14 on Win) のプレビュー。
Win の Opera では、デフォルトで目盛りがついています。他はスライダーのみ。(Firefoxは未対応)

同じサンプル1の Chrome (25.0 on Mac) でのプレビュー。スライダーのみですが、まあ使えます。
(クリックでサンプルHTMLが開きます)

●サンプル2_1
min属性で最小値をマイナス80、max属性を40に、step属性はここでは20にしました。
value属性は指定していませんが、真ん中の「-20」になっていますね。
スライダーを動かすと、20ずつしかチョイスできないのがわかります。

<label>-80<input type="range" name="ex2_1" min="-80" max="40" step="20">40</label>

これはOpera (on Win) のプレビュー。
Win の Opera では、step属性の数値の間隔で目盛りがつきます。
他はスライダーのみ、Firefoxは未対応です。
(クリックでサンプルHTMLが開きます)

●サンプル2_2
範囲の真ん中の数値が step属性とマッチしない時、value属性はどうなるかテストしてみました。
min属性をマイナス70、max属性を30に、step属性は20です。
単純計算だと真ん中は「-20」なのですが、「-70」から「30」までを、ステップ20でチョイスするため、「-20」は選べません。
で、ステップで選択可能な「-10」が初期値 (value) になっています。なぜ「-30」でないのかは疑問ですが、ま、どっちでもいっか。

<label>-70<input type="range" name="ex2_2" min="-70" max="30" step="20">30</label>

これはOpera (12.14 on Win) のプレビュー。
他の対応ブラウザも、初期値はみんな-10になっていました。
(クリックでサンプルHTMLが開きます)

●サンプル3
小数のレンジのテストです。
min属性で「-1.25」max属性を「1.05」step属性を「0.05」にしました。
そしてvalue属性を「真ん中じゃない数値」にしたらどうなるか、テストしてみました。
真ん中は「-0.1」なのでそれよりマイナスの「-0.5」に指定してみましたよ。

<label>-1.25<input type="range" name="ex3" min="-1.25" max="1.05" step="0.05" value="-0.5" >1.05</label>

デフォルトがstep=1なので、小数を使う場合は、step属性で必要な数値を指定しましょう。
小数点以下第2位まで選ばせたいなら、stepも小数点以下第2位に。

これはOpera (12.14 on Win) のプレビュー。
ステップが細かいと目盛りは出ないみたい。
valueはちゃんと指定どおりの位置になってます。
他の対応ブラウザでも同様。
(クリックでサンプルHTMLが開きます)

●サンプル4
list属性のテストです。<datalist>要素も併用します。
ここではリストを、-50、-20、0 の3択にしました。step属性は無しに ( = 1になります) 。

<label>-50<input type="range" name="ex4" min="-50" max="30" list="exlist">30</label>
<datalist id="exlist">
<option value="-50"></option>
<option value="-20"></option>
<option value="0"></option>
</datalist>

これはOpera (12.14 on Win) のプレビュー。
list属性での指定どおりに目盛りが入っていて、スライドするとこの地点にスナップします。
他の対応ブラウザでは、目盛りは出るけどスナップはしませんでした。
(クリックでサンプルHTMLが開きます)

HTML5のフォームサンプル

HTML5での新要素を使ったフォームのサンプルです。今回の「レンジ」用の部品も、
「アンケートにお答えください」→「当店のサービスについて」で使用しています。

クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

次回予告

次回は、色を選んでもらうための、<input type="color">を使ってみましょう。
これもHTML5からの新しい値です。
対応ブラウザでは カラーピッカーが表示され、ユーザが色を選ぶ事ができる部品です。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.