Sep.21st, 2020
＃
要素について
| カテゴリー | なし |
| 利用場所 | “select”要素の子要素として |
| 内容 | 0個以上の“option”要素とスクリプト支援要素 |
| タグの省略 | 開始タグは省略不可 |
| 直後に“optgroup”要素が続く場合、もしくは親要素の中で後に続くコンテンツがない場合は終了タグを省略可能 |
“optgroup”要素は親要素となる“select”要素で表される選択式の入力欄の入力候補をグループ化する要素です。
“optgroup”要素の子要素となる“option”要素はグループ化されます。グループ化された入力候補は他の入力候補と分けて表示されます。
入力候補のグループには“label”属性で指定されたラベルが表示されます。このラベルは入力値として選択することはできません。
“optgroup”要素の中に別の“optgroup”要素を配置して入れ子にすることはできません。
サンプルコード
<form method="post" action="sample-selecttag1.php" target="_blank">
<fieldset>
<p>
<label>
好きな魚：
<select name="fish">
<option value="">--選択--</option>
<optgroup label="海の魚">
<option value="鮪">鮪</option>
<option value="鮭">鮭</option>
<option value="鮫">鮫</option>
</optgroup>
<optgroup label="川の魚">
<option value="鯉">鯉</option>
<option value="鱒">鱒</option>
<option value="鮒">鮒</option>
</optgroup>
</select>
</label>
</p>
</fieldset>
<p><input type="submit" value="送信する"></p>
</form>
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| label="" | 選択肢のグループのラベル | テキスト | 選択肢のグループのラベル |
| 任意属性 | |||
| グローバル属性 | |||
| disabled="" | 入力候補を無効化 | disabled | 入力候補を無効化 |
＃
仕様書
“optgroup”要素はHTML4.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLOptGroupElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute boolean disabled;
[CEReactions] attribute DOMString label;
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
/* なし */
