HTML5

：

タグ（要素）

：

OPTGROUP

　 編集：2022.06.27 by T.A.

→● mdn

OPTION要素のグループ化。

この要素を使用できる文脈

SELECT要素の子として。

内容モデル

0 個以上の OPTION 要素およびスクリプト サポート要素。

text/htmlにおけるタグ省略

OPTGROUP 要素が別の OPTGROUP 要素の直後に存在する場合、または親要素に追加の内容が存在しない場合、OPTGROUP 要素の終了タグは省略することができる。

内容属性
解説

OPTGROUP 要素を選択する方法は存在しない。OPTION 要素を選択することができるだけである。OPTGROUP 要素は単に OPTION 要素のグループに対するラベルを提供するだけである。

例

次の断片は、SELECT 要素ドロップダウン ウィジェットで 3 つのコースからレッスンの集合が提供される様子を示す： 

<!DOCTYPE HTML>
<HTML>
<BODY>
<FORM action="courseselector.dll" method="get">
 <P>Which course would you like to watch today?
 <P><LABEL>Course:
  <SELECT name="c">
   <OPTGROUP label="8.01 Physics I: Classical Mechanics">
    <OPTION value="8.01.1">Lecture 01: Powers of Ten
    <OPTION value="8.01.2">Lecture 02: 1D Kinematics
    <OPTION value="8.01.3">Lecture 03: Vectors
   <OPTGROUP label="8.02 Electricity and Magnetism">
    <OPTION value="8.02.1">Lecture 01: What holds our world together?
    <OPTION value="8.02.2">Lecture 02: Electric Field
    <OPTION value="8.02.3">Lecture 03: Electric Flux
   <OPTGROUP label="8.03 Physics III: Vibrations and Waves">
    <OPTION value="8.03.1">Lecture 01: Periodic Phenomenon
    <OPTION value="8.03.2">Lecture 02: Beats
    <OPTION value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </SELECT>
 </LABEL>
 <P><INPUT type=submit value="? Play">
</FORM>
</BODY>
</HTML>
disabled属性

フォーム制御が無効であるかどうか。真偽属性。

一緒に OPTION 要素のグループを無効にするために使用できる。

<SELECT>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTGROUP disabled>
 <OPTION>OPTION3
 <OPTION>OPTION4
 </OPTGROUP>
</SELECT>

label属性

ユーザー可視ラベル。

これを指定しなければならない。その値は、ユーザー インターフェイスの目的に対して、グループの名前を与える。

<SELECT>
 <OPTION>OPTION1
 <OPTION>OPTION2
 <OPTGROUP label="ラベル">
 <OPTION>OPTION3
 <OPTION>OPTION4
 </OPTGROUP>
</SELECT>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：