Tweet

Pocket

フォームにおいて、数値入力の補助になる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以降