input type="range"

提供: ASCII.jp HTMLリファレンス

ver.未対応~ ver.未対応~ ver.14~ ver.5.1~ ver.11.5~
意味 大まかな数値の入力
読み方 インプット

カテゴリー

フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
リスト化/ラベル付け可能/送信可能/リセット可能なフォーム関連要素

親にできる要素/カテゴリー

フレージング・コンテンツが期待される場所

子にできる要素/カテゴリー

<input 属性="値">

属性 概要
name 文字列 フィールドの名前
value 文字列 送信する値
autocomplete 「on」または「off」 オートコンプリート機能のオン/オフ
list 文字列 datalist要素のID(type="password"の時を除く)
max 数値 入力可能な数値の最大値
min 数値 入力可能な数値の最小値
step 数値 ステップ値

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 type属性の値が「range」のinput要素は、数値を入力するための要素になります。ただし、「type="number"」の場合と異なり、大まかな数値を入力する場合に使います。また、よりシンプルなユーザーインターフェイスで表示されます。

 Internet Explorer 8/9とFirefox 7では、type="number"の機能は実装されておらず、1行入力と同じ動作になります。

 Google Chrome 14、Safari 5.1、Opera 11.5では、デフォルトではスライダー形式で表示され、スライダーを操作して数値を増減できます。

入力値の制限

 min・max属性は、入力できる値の下限・上限を指定します(min以上max以下)。いずれの値も、浮動小数点数値として有効な形式の文字列を指定します。min・max属性を指定しなかった場合、それぞれの標準値は0、100です。

 step属性は、入力できる値のステップを指定します。step属性の標準値は1です。

 Internet Explorer 8/9とFirefox 7は、min、max、step属性の機能は実装されていません。

その他の属性

 autocomplete、list属性の使い方は、input 1行入力系と同じです。

サンプル

(body要素の内部のみ掲載)

<form action="server.php" method="post">
<p><label>range:<input type="range" name="num" min="0" max="100" step="2"></label></p>
<p><input type="submit" value="送信"></p>
</form>

 min、max、step属性を使って、0~100の偶数を入力できるようにしています。

サンプル実行画像

 Internet Explorer 9での表示例です。type="range"の処理が実装されていないので、1行入力欄が表示されます。

 Google Chrome 14でフォームを開いて、数値を入力した例です。スライダーで数値を増減できます。

Powered by Web Professional

目次