メニュー

メニューは、選択項目一覧を提示します。optgroup要素やoption要素との組合せにより、 select要素でメニューを作成します。

select要素

select要素はメニューを生成します。メニュー中の各選択肢はoption要素によって提示されます。 従って、1つのselect要素には最低1つのoption要素が含まれている必要があります。

select要素の属性定義

属性名(name)

この属性はコントロール名を表します。

size

select要素がスクロール式リストボックスとして表示される場合、 この属性はリスト中で一望させたい行数を指定します。 この属性を指定しない場合は、プルダウンメニューとして表示されます。 項目数が少ない場合にはsizeを指定するのも良いでしょう。

複数選択(multiple)

この属性が設定された場合、複数選択が許容されます。 設定されない場合、1つのselect要素では1つの選択しか許されません。
この属性を指定する場合はsize属性で全ての項目が表示されるようにするほうが分かりやすいでしょう。

option要素

select要素で表示する項目を指定します。以下はこの要素が持つ特別な属性です。

選択済み選択肢(selected)

選択肢をあらかじめ選択しておくことが出来ます。
selected属性が設定されたoption要素が存在しない場合の動作がどうなるかは分かりません。 従って少なくとも1つはselected属性を指定するのが良いでしょう。
multiple属性が設定されている場合は複数の初期値を持っていても大丈夫です。
しかし、multiple属性が指定されていないにもかかわらず、 複数の要素にselected属性が指定されている場合、どのように動作するかが分かりません。
指定する要素数には気を付けてください。

value

コントロールの初期値を指定します。この属性が設定されていない場合、 初期値はoption要素の内容になります。

label

項目に関してoption要素の内容そのものよりも短いラベルを指定できます。 この設定がなされている場合、この項目のラベルとして、option要素の内容ではなく label属性で指定された値が表示されます。
逆に、label属性が設定されていない場合はoption要素の内容がラベルとして表示されます。

リストのグループ化

optgroup要素によって、選択項目を論理的にグループ化することができます。 グループ化することにより、長大な選択リストがある程度見やすくなります。
html4では、optgroup要素はselect要素の直接の子でなければなりません。 つまり、グループは入れ子にすることは出来ません。
optgroup要素のlabel属性は、選択グループのラベルを指定します。

メニューの例

次の例では、7つのソフトウエアコンポーネントからどれをインストールするかを ユーザに選択してもらうメニューです。
第1・第2項目が選択済みになっていますが、 これはページを見ている人によって選び直してもらうことが出来ます。 残りの5項目は選択済みではありません。 size属性は、7項目から選択するにも関わらず同時に4行しかメニュー表示されないことを示しています。 他の3項目は通常スクロールすることで利用できます。
select要素に続いて、提出ボタンとリセットボタンがあります。

<form action="" method="post">
   <p>
   <select multiple size="4" name="component-select">
      <option selected value="component_1_a">component_1</option>
      <option selected value="component_1_b">component_2</option>
      <option>component_3</option>
      <option>component_4</option>
      <option>component_5</option>
      <option>component_6</option>
      <option>component_7</option>
   </select>
   <input type="submit" value="送る">
   <input type="reset">
   </p>
</form>

選択された項目だけが、(コントロール名 "component-select" との組合せにより)満足となります。 value属性がどこかに設定されている場合は、それがこのコントロールの初期値になります。 また、設定されていない場合はこの要素の内容が初期値になります。
次の例ではoptgroup要素を用いてグループ選択を実現しています。

<form action="select.html" method="post">
 <p>
 <select name="ComOS">
     <option selected label="none" value="none">None</option>
     <optgroup label="PortMaster 3">
       <option label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</option>
       <option label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</option>
       <option label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</option>
     </optgroup>
     <optgroup label="PortMaster 2">
       <option label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</option>
       <option label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</option>
     </optgroup>
     <optgroup label="IRX">
       <option label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</option>
       <option label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</option>
     </optgroup>
 </select>
</form>

上のフォームは、次のグループ化を表現しています。

  None
  PortMaster 3
      3.7.1
      3.7
      3.5
  PortMaster 2
      3.7
      3.5
  IRX
      3.7R
      3.5R