【HTML5】フォーム 数値関連の入力補助
フォームにおいて、数値入力の補助になるtype属性をご紹介します。
数値入力の補助になるtype属性は以下のものがあります。
number・・・数値を入力するための入力欄を作成
range・・・数値を入力するためのスライダーを作成
【使用例】
<input max="100" min="0" name="num" step="5" type="number" value="50" /> <input max="100" min="0" name="num" step="5" type="range" value="50" />
min・・・最小値
max・・・最大値
step・・・入力幅
value・・・初期値
range利用時には、スライダーの位置する値がわかるように、以下のようなJavaScriptを一緒に使うと便利です。
【使用例】
<input max="100" min="0" name="num" step="5" type="range" value="50" /> <span id="val">50</span> <script>// <![CDATA[ function rangeValue(value){ document.getElementById("val").innerHTML = value; } // ]]></script>
【対応ブラウザ】
number → Opera9.0以降、Chrome8以降
range → Opera9.0以降、Safari5以降、Chrome7以降
コメントを残す