< input 【 インプット 】 type 【 タイプ 】 =" range 【 レンジ 】 ">

type属性にrangeが指定されたinput要素は、数値の入力欄となります。ただし、それほど厳密ではない、大まかな数値の入力欄です。対応するブラウザーでは多くの場合、閲覧者が操作できるスライダー形式のユーザーインターフェースが表示されます。

使用できる属性

input要素で解説した以下の属性を同時に使用できます。min属性の初期値は「0」、max属性の初期値は「100」です。選択できる数値の単位はstep 属性で指定でき、初期値は「1」です。

autocomplete 【 オート・コンプリート 】 , autofocus 【 オート・フォーカス 】 , disabled 【 ディスエーブルド 】 , form 【 フォーム 】 , list 【 リスト 】 , max 【 マックス 】 , min 【 ミニマム 】 , name 【 ネーム 】 , step 【 ステップ 】 , value 【 バリュー 】

サンプルコード

以下の例では大まかな数値の入力欄を設置しています。最小値や最大値、単位を指定していないので、閲覧者がスライダーを操作して送信されるデータは、0から100までの間の数値になります。

<form action="cgi-bin/example.cgi" method="post">
  <p>この記事の満足度をお答えください。</p>
  <p>つまらない<input type="range" name="range">おもしろい</p>
  <input type="submit" name="submit" value="送信">
</form>

関連記事

• form　フォームを表す
• input　入力コントロールを表示する