select

select要素は、選択型のコントロールです。イメージとしては、ul要素をコントロールにした感じでしょうか。XHTML 1.1に存在する選択型のコントロールとしては、他にinput要素のチェックボックス、ラジオボタン、送信ボタン、button要素の送信ボタンなどがありますが、どれを使うかは好みの問題でしょう(勿論送信ボタンは一つの選択しかできませんが)。

select要素を使うと、他のコントロールと比べて、階層構造を作るのが楽になります。また、選択肢のラベルとコントロールを結びつけるのにlabel要素も要らない為、手間も若干軽減されるでしょう。

最も基本的なselect要素の使い方は、option要素を幾つか持たせる事です。optgroup要素を使う場合でもそうですが、最低一つは子に持たなくてはなりません。

上記のように、選択肢のラベルを内容で、値をvalue属性で指定するのが一般的です。また、option要素の内何れか一つにselected属性を持たせておくと良いでしょう。何れのoption要素もselected属性を持っていないと、ユーザーエージェントによっては規定とは異なる挙動をします。

select要素のsize属性は、メニューの行数を指定します。1の場合ドロップダウンリスト (通常は1行だが、必要に応じて展開される)に、2以上の場合リストボックス (初めから展開されている)になる事が期待できます。選択肢の数が行数より多ければスクロールするリストボックスになるでしょう。

上記の例では、size="3"に加えてmultiple属性が付いています。これにより、ユーザはShiftやCtrlなどで複数の選択肢を選べるようになります。また、提供側では複数のoption要素をselected属性で選択済みにできます。

また、option要素の形も異なっています。最初の例ではラベルを内容として記述し、値をvalue属性で指定しましたが、今度はその逆をやっています。しかし、この方法は仕様ばかりで実装はされていないようです。