特定の範囲の数値を指定するためのコントロールを表すには?
input type="range"タグの書式
input type="range"タグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
input type="range"タグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
min | 値の下限を指定します。 指定しない場合はデフォルト値の0となります。 |
max | 値の上限を指定します。 指定しない場合はデフォルト値の100となります。 |
指定可能なフォーム部品の共通属性 | name、disabled、form、autocomplete、autofocus、list、step、value ※フォーム部品の共通属性のページを参照してください。 |
input type="range"タグの解説
<input>タグは、入力コントロールを表す要素です。
<input>要素の「type」属性に「range」を指定すると、特定の範囲の数値を入力するコントロールを作ることができます。
ブラウザ上では、一般的にはスライダーとして表示されます。
input type="range"タグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<section>
<h1>アンケート</h1>
<form action="sample.cgi" method="post">
<p>あなたの職場はどんな照明器具が使われていますか?
<select>
<option>白熱電球</option>
<option>LED電球</option>
<option>蛍光灯</option>
<option>その他</option>
</select>
</p>
<p>あなたが感じる照明の明るさは?</p>
<p><label>弱い<input type="range" name="range" max="1000" value="200">強い</label></p>
<input type="submit" value="送信">
</form>
</section>
</body>
</html>
input type="range"タグのサンプル画面1
input type="range"タグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<section>
<h1>アンケート</h1>
<p>ご利用ありがとうございます。アンケートにご協力ください。</p>
<form action="sample.cgi" method="post">
<fieldset>
<legend>アンケート</legend>
<p><label>お名前:<input name="n"></label></p>
<p><label>ご住所:<input name="adr"></label></p>
<p><label>満足度(0~10): <input type="range" name="range" max="10" value="5"></label></p>
</fieldset>
<input type="submit" value="送信">
</form>
</section>
</body>
</html>
input type="range"タグのサンプル画面2
input type="range"タグの関連項目