optgroup要素

optgroup要素は、選択式メニュー（select要素）における選択肢（option要素）をグループ化する要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト select要素の子要素として使用できる。
コンテンツ・モデル ０個以上のoption要素。
属性 グローバル属性。
label属性、disabled属性。
ブラウザ対応

構文

<optgroup label="グループ名"></optgroup>

要点

  • optgroup要素は、選択式メニュー（select要素）における選択肢（option要素）をグループ化する要素である。
  • optgroup要素内に、選択肢を表すoption要素を配置し、グループ化する。
  • グループ名は、必須属性であるlabel属性に指定する。
  • select要素の子要素として使う。

属性

必須属性

属性 説明
label属性 グループ名を指定する属性。

任意属性

属性 説明
disabled属性 無効にする属性。

サンプルコード

<select>
	<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>

サンプル

HTMLソースコード

<form action="sample-select.php" method="post" target="_blank">
	<p>
		選択肢： 
		<select name="sampleName">
			<optgroup label="グループＡ">
				<option>選択肢１</option>
				<option>選択肢２</option>
				<option>選択肢３</option>
			</optgroup>
			<optgroup label="グループＢ">
				<option>選択肢４</option>
				<option>選択肢５</option>
				<option>選択肢６</option>
			</optgroup>
			<optgroup label="グループＣ">
				<option>選択肢７</option>
				<option>選択肢８</option>
				<option>選択肢９</option>
			</optgroup>
		</select>
	</p>
	<p>
		<button type="submit">送信</button>
	</p>
</form>

実際の表示

選択肢：