さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】フォーム 数値関連の入力補助

Pocket
LINEで送る

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

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容