HTML

数値レンジ

詳細を開く 詳細を閉じる

<input>type属性 - range

テキスト型
textテキストボックス
passwordパスワード
number数値
emailメールアドレス
urlURL
tel電話番号
search検索語
ボタン型
submit送信ボタン
resetリセットボタン
button一般のボタン
image画像ボタン(送信)
特殊型
radioラジオボタン
checkboxチェックボックス
hidden隠しエリア
fileファイル送信
range数値レンジ
colorカラーパレット
日付型
date日付
datetime日付と時刻
datetime-localローカルタイム
month
time時刻
week
  • <input>type属性にrangeを指定すると、数値レンジになります。
  • HTML5で追加された機能です。
  • 数字を容易に変更できる入力機能です。
  • デフォルトでは「0~100」が入力可能です。
  • デフォルトでは現在値が表示されないので、<output>要素と組み合わせて使うか、JavaScriptで機能を追加する必要があります。
  • リセットボタンをクリックすると、初期化されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<input type="range" name="r1">

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

現在値を表示 : <output>


別ウィンドウで表示

<form action="../aaa.php" method="GET"
	  oninput="o.value=parseInt(r1.value)">

<input type="range" name="r1">
<output name="o"></output>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

初期値 : value


別ウィンドウで表示

<form action="../aaa.php" method="GET"
	  oninput="o.value=parseInt(r1.value)">

<input type="range" name="r1" value="10">
<output name="o"></output>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

最小値 : min


別ウィンドウで表示

<form action="../aaa.php" method="GET"
	  oninput="o.value=parseInt(r1.value)">

<input type="range" name="r1" min="50">
<output name="o"></output>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

最大値 : max


別ウィンドウで表示

<form action="../aaa.php" method="GET"
	  oninput="o.value=parseInt(r1.value)">

<input type="range" name="r1" max="50">
<output name="o"></output>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

ステップ : step


別ウィンドウで表示

<form action="../aaa.php" method="GET"
	  oninput="o.value=parseInt(r1.value)">

<input type="range" name="r1" step="20">
<output name="o"></output>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ