<input type=”range”>|大まかな数値の入力欄を作成する

<input type="range">|大まかな数値の入力欄を作成する

<input>タグのtype属性に「range」を指定すると、大まかな数値の入力欄を作成できます。

一般的にはスライダーで表示され、input type=”number”ほど正確な値が重要でない場合に使用します。
 
 

使用例

 
 

表示例

満足度(0〜10):

 
 

スポンサーリンク

数値の書式

入力する数値、value属性、min属性、max属性の値は、以下の書式で記述する必要があります。

5、-5、0.5、0.5E-2

  • 負数の数値も入力可能(マイナス(-)を付ける)。
  • 小数点以下の数値も入力可能(ピリオド(.)に続けて記述)。
  • 指数表記も使用可能(Eまたはeを付ける)。

 
 

value属性

スライダーのデフォルトの位置を指定します。

 
 

スポンサーリンク

min属性 / max属性

入力できる数値の範囲を指定します。
どちらかのみを指定することも可能です。

  • min属性
    入力できる数値の最小値を指定します。
  • max属性
    入力できる数値の最大値を指定します。
 
 
min属性の値よりmax属性の値の方が大きい場合は、スライダーのデフォルトの位置は中間になります。
※そうでない場合は、スライダーの位置はmin属性値の位置になります。
 
 

step属性

入力できる値の間隔(ステップ)を指定します。
デフォルトのステップは1です。

以下の例では5を指定しているので、5間隔で入力できることになります。(例:5、10、15…)

 
 
小数点以下の入力を可能にする場合は、以下のように0.1などを指定します。

 
 
値に「any」を指定すると、ステップは設定されません。

 
 

スポンサーリンク

autocomplete属性

入力欄でオートコンプリート機能を有効にするかどうかを指定します。

オートコンプリート
以前に入力した内容をブラウザが覚えておき、次回同じフォームにアクセスしたときに、入力候補を予測して自動的に表示する機能。
 
 
指定できる値は、「on」「off」のどちらかです。

  • on
    オートコンプリート機能を有効にする(デフォルト)
  • off
    オートコンプリート機能を無効にする

 
 
autocomplete属性がない場合は、デフォルトの「autocomplete=”on”」(有効)として扱われますが、form要素に「autocomplete=”off”」(無効)が指定されているときは、input要素のオートコンプリート機能も無効になります。
 
 

list属性

入力候補リストの表示を指定します。
ユーザーは表示された候補から選択するだけでなく、任意の値を入力することもできます。

入力候補リストはdatalist要素で作成し、datalist要素に指定したID名をlist属性の値に指定します。

 
 

スポンサーリンク

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

  • autofocus
  • autofocus=”autofocus”
  • autofocus=””

 
 

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

スポンサーリンク

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 

スポンサーリンク

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。

 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








<input type="range">|大まかな数値の入力欄を作成する