HTML リファレンスマニュアル

HTML タグ完全ガイド

HTML: <optgroup> タグ

HTMLの <optgroup> タグは、<select> コントロールの値のドロップダウンリストにオプショングループを作成します。これらのドロップダウン値は、一連の <option> タグで定義され、<optgroup> タグでグループ化されます。<optgroup> の値は、<select> コントロールのグループ項目の上に灰色のタイトルとして表示されます。このタグは通常、<optgroup> 要素とも呼ばれます。

オンラインの例

関連するオプションをグループ化するために <optgroup> タグを使用します：

例

!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML　optgroupタグの使用(基本教程網　oldtoolbag.com)</title>
</head>
<body>
　　<label　for="tutorial_choice">Tutorials:　</label>
　　<select　id="tutorial_choice">
　　　　<optgroup　label="Web">
　　　　　　<option　value="html">HTML</option>
　　　　　　<option　value="css">CSS</option>
　　　　</optgroup>
　　　　<optgroup　label="Database">
　　　　　　<option　value="sql">SQL</option>
　　　　　　<option　value="oracle">Oracle</option>
　　　　</optgroup>
　　</select>
</body>
</html>

テストを見てみる ‹/›

このHTML5ドキュメントの例では、<optgroup>タグを使用してドロップダウンリストに二つのオプショングループを作成しました。最初のオプショングループのタイトルはWebで、二つのドロップダウン値を含んでいます-HTMLとCSS。二番目のオプショングループのタイトルは「データベース」で、二つのドロップダウン値を含んでいます-SQLおよびOracle。

ブラウザの互換性

IEFirefoxOperaChromeSafari

ほとんどの主要ブラウザが <optgroup> タグをサポートしています。

タグの定義および使用説明

<optgroup> タグは、グループタイトルを持つオプショングループに <option> タグのグループを構成します。

label <optgroup> の値は灰色のタイトルとして表示されます。すべてのグループ化された項目は、タイトルの下にインデントされたオプションリストとして表示されます。

デフォルトでは、<select> タグの最初のオプションが選択されたアイテムとして表示されます。ユーザーはドロップダウンリストから別のオプションを選択できます。

多くのオプショングループがある場合、<optgroup> タグを使用して関連するオプションを簡単にグループ化できます。

属性

属性	値	説明
disabled	disabled	このオプショングループを無効にします。
label	text	オプショングループに対する説明を指定します。

グローバル属性

<optgroup> タグはグローバル属性をサポートしており、完全な属性表を確認してください HTMLグローバル属性。

イベント属性をサポートしています

<optgroup> タグはすべての HTMLイベント属性。

HTML: <option> タグ HTML: <ol> タグ