<optgroup> - オプションのグループ化

2009.12.11

構文

<form>
<div>
  <select>
    <optgroup>
      <option>・・・</option>
        ：
    </optgroup>
    <option>・・・</option>
      ：
  </select>
    ：
</div>
</form>

説明文

　<optgroup>タグは，<option>グで関連のある選択肢をグループ化する。グループ化した選択肢の前の行には<optgroup>タグの「label」属性で指定した文書が表示される。ただし，「label」で指定した文書は選択できない。

　グループ化する場合は，<optgroup>と</optgroup>の中にグループ化する<option>タグを列挙する。また，<option>タグを<optgroup>でグループ化しない選択肢も併用することが可能だ。

サンプル

HTMLソース

<form action="optgroup.cgi">
<div>
  使用中のOS：<br>
  <select name="os" size="5">
    <optgroup label="Windows">
      <option>Windows 7</option>
      <option>Windows Vista</option>
      <option>Windows XP</option>
      <option>Windows 2000</option>
      <option>Windows 95/98</option>
      <option>その他のWindows</option>
    </optgroup>
    <optgroup label="Mac OS">
      <option>Mac OS X</option>
      <option>Mac OS 9</option>
      <option>Mac OS 8</option>
      <option>その他のMacOS</option>
    </optgroup>
    <optgroup label="Linux">
      <option>Red Hat Enterprise Linux</option>
      <option>Fedora</option>
      <option>Ubuntu</option>
      <option>Debian GNU/Linux</option>
      <option>その他のLinuxディストリビューション</option>
    </optgroup>
    <option>その他のOS</option>
  </select><br>
  <input type="submit" value="送信">
</div>
</form>

ブラウザ表示例

対応状況

HTML			IE		Firefox		Opera
4 strict	4 Transitional	5	6	7	2	3	8	9
○	○	○	○	○	○	○	○	○

要素，タグ

タグ要素	フォーム要素
包括可能要素	option
タグ記述条件	開始タグ：必須　終了タグ：必須

属性

よく使う属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
disabled	選択を禁止する。禁止すると背景および文字が灰色になる	○	○
label=ラベル名	グループ化した選択肢の名称を指定する。通常，グループ化した選択肢の上にラベルの内容が表示される。ただし，このラベルは選択できない	○	○

その他の属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
class=クラス名	このタグのクラス名。CSSでスタイルを指定する場合などに利用される	○	○
dir=方向	タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する	○	○
id=ID	タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する	○	○
lang=言語	タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する	○	○
style=スタイル	タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照	○	○
title=タイトル	タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する	○	○

マウスやキーボードの状況変化に関わる属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
onclick=スクリプト	このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する	○	○
ondblclick=スクリプト	このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する	○	○
onmousedown=スクリプト	このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する	○	○
onmouseup=スクリプト	このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する	○	○
onmouseover=スクリプト	このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する	○	○
onmousemove=スクリプト	このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する	○	○
onmouseout=スクリプト	このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する	○	○
onkeypress=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する	○	○
onkeydown=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する	○	○
onkeyup=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する	○	○