“input”要素~“type="range"”

“type="range"”

“type="range"”を指定した“input”要素は大まかな数値の入力欄を表します。

フォームの送信時には“name”属性の値とともに入力された数値が送信されます。

入力できる値の範囲は“min”属性と“max”属性で指定します。指定しない場合の既定値は最小値が“0”、最大値が“100”です。また、“step”属性を指定しない場合の入力できる値の間隔は“1”です。

“value”属性で指定されない場合の入力値の初期値は最小値と最大値の中間値です。

“list”属性で“datalist”要素と関連付けると入力の目安となる目盛が表示されます。

多くのブラウザではユーザーがノブを操作することで入力値を編集するスライダーが表示されます。通常入力値が数値として表示されないので正確な数値の入力を求める場面での使用には向きません。厳密な数値の入力を求める場合は“type="number"”を指定した“input”要素を使用します。

対応していないブラウザでは単純なテキスト入力欄(“type="text"”)として扱われます。

サンプルコード

<form method="post" action="sample-inputtag2.php" target="_blank">

<fieldset>

<p><label>猫が好きな度合い：<input type="range" name="sample01"></p>

</fieldset>
<p><button type="submit">送信する</button></p>

</form>

猫が好きな度合い：

送信する

＊送信すると入力内容が表示されます。

属性と値

属性		値
属性	説明	値	説明
必須属性
type=""	入力欄の種類	range	大まかな数値の入力欄
任意属性
グローバル属性
autocomplete=""	ブラウザーによるオートコンプリートの可否	on	オートコンプリートを行う
		off	オートコンプリートを行わない
disabled=""	入力欄を無効化	disabled	入力欄を無効化
form=""	関連付けるフォーム	ID名	関連づける“form”要素の“id”属性の値
list=""	入力値の候補と関連付ける	ID名	関連づける“datalist”要素の“id”属性の値
max=""	入力可能な最大値	数値	入力可能な最大値
min=""	入力可能な最小値	数値	入力可能な最小値
name=""	入力欄の名前	文字列	入力欄の名前
step=""	入力可能な数値の間隔	any	どのような値も入力可能(無段階)
		数値	入力可能な数値の間隔
value=""	フォームで送信する値の初期値	数値	数値

仕様書

range