<SELECT size="">リストボックスを作る

<SELECT>タグにsize属性を設定すると、指定した行数のリストボックスを作成することができます。

通常のセレクトボックスを作成する場合と同様に<SELECT>~</SELECT>でリストボックス全体を囲み、その中に選択肢を示す<OPTION>を表示したい項目の数だけ配置します。 <OPTION>内には、リストボックスに表示したい項目(選択肢)のテキストを記述して下さい。

value属性では、選択された際にサーバーに送信される値を指定しますが、省略した場合は<OPTION>に記述したテキストが選択された項目として送信されます。 size属性ではリストボックスの行数を指定することができますが、項目数がリストボックスの表示行数より多い場合は、スクロールバーが付けられます。

またmultiple属性を指定すると、複数の項目が選択できるようになり、selected属性を指定すると、その項目があらかじめ選択された状態で表示されるようになります。multiple属性で複数行選択する場合はShiftctrlを押しながらクリックする事で、複数の選択ができます。

なおリストボックスに名前を付けたい場合はname属性を指定して下さい。付けた名前は<FORM>で選択された項目のテキストと一緒に送信されてきます。

使用した時の例

<p>好きな星座は?<br />
<select size="5" name="like" multiple>
  <option>牡羊座</option>
  <option>おうし座</option>
  <option>しし座</option>
  <option>うお座</option>
  <option>かに座</option>
  <option>てんびん座</option>
  <option>いて座</option>
</select>
</p>

ブラウザ上の表示例

好きな星座は?

書式

  • <select size="行数" name="名前" multiple>~</select> ・・・・・・ リストボックスの作成

属性

name="任意の名前" フォームのデータが送信される時は、この名前と選択された項目のvalue属性の値、または<OPTION>内のテキストが送られてくる
size="数値" 画面に一度に表示するリストボックスの行数を指定(初期値は1)
multiple 項目の複数選択を許可する
disabled 選択できないようにする
value="" サーバーへ送信されるテキストの指定
selected その項目がデフォルトで選択された状態となる

対応ブラウザなどのデータ

形式 <select>~</select> 分類 インライン要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 option / optgroup / template / script
開始タグ 必須 終了タグ 必須
カテゴリ フローコンテンツ / フレージングコンテンツ / パルパブルコンテンツ / インタラクティブコンテンツ / リステッド / ラベラブル / リセッタブル / サブミッタブル / リアソシエイタブル / フォーム関連
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~