HTML5 数値を選択する入力フィールド

投稿日時: 投稿者:

数値を選択する入力フィールド

HTML5から実装されているHTML5 数値を選択する入力フィールドを試してみました。
やはり、今更ながらなのですが。。。

もともと必要ならリストやスライダー等とjavascriptを使って自前で組み込んでいたのですが、どの程度使えるのかと思って。
簡単に数値選択が可能なので、アンケート等で使用するならこれで十分な気がします。
下に試したHTMLを貼っておくので試してみては如何でしょうか？
ちなみに、ブラウザによって微妙な違いが出るかもしれませんので、そのあたりのチェックもした方が良いと思われます。

下のHTMLはtype=’renge’を使って単純な数値を選択する入力フィールド2つを試しています。
バーを移動させるごとに数値を取得して表示しています。
送信ボタンをクリックすると送信されてクリアされます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>test</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  alert("テスト開始！数値を選択する入力フィールドのチェックHTMLです");

  $("#range1").change(function() {
    //値が変更されたときの処理
    $("#disp1").val($("#range1").val());
  });

  $("#range2").change(function() {
    //値が変更されたときの処理
    $("#disp2").val($("#range2").val());
  });
});
</script>
<style type="text/css">

</style>
</head>
<body>

<form>
 <div>
 テスト
 </div>
 <fieldset>
  <LEGEND></LEGEND>
  <label>デフォルトの場合、min属性の初期値は0、max属性の初期値は100となります。 また、step属性の初期値は1となります</label>
　<p><label>少ない<input type='range' id='range1'>多い</label><input type='text' id='disp1'></p>

　<label></label>
 </fieldset>

 <fieldset>
  <LEGEND></LEGEND>
  <label>min属性の初期値は1、max属性の初期値は５となります。 また、step属性1とした場合</label>
　<p><label>悪い<input type='range' id='range2' min='1' max='5' step='1'>良い</label><input type='text' id='disp2'></p>

　<label></label>
 </fieldset>

 <p><button type='submit'>送信</button></p>
</form>

</body>
</html>

以上、「HTML5 数値を選択する入力フィールド」の簡単なチェックでした。