＜optgroup要素＞ - セレクトフォームの項目のグループ化

公開日: 2017/02/09

optgroup要素は、option要素をグループ化するための要素です。グループ化することで、ユーザーが項目を選択しやすくなるでしょう。

概要

名前

optgroup (Option group)

カテゴリー

なし。

配置できる場所

select要素の子要素として配置すること。

コンテンツモデル

0個以上のoption要素。

タグの省略

別のoptgroup要素が後に続く場合、終了タグを省略できる。

または、親要素にこれ以上コンテンツがない場合、終了タグを省略できる。

DOM Interface

HTMLOptGroupElement

デフォルトのスタイル

optgroup {
	font-weight: bolder;
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/forms.html#the-optgroup-element

属性

disabled

この属性を付けると、操作が無効になる。値も送信されない。論理属性。

label

グループの名前。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

optgroup要素は、セレクトフォームの項目をまとめるための要素です。典型的な例として、都道府県を選択するフォームがあったとしましょう。

HTML

<select name="prefecture">
	<option value="1">北海道</option>
	<option value="2">青森県</option>
	<option value="3">岩手県</option>
	<option value="4">宮城県</option>
	<option value="5">秋田県</option>
	<option value="6">山形県</option>
	<option value="7">福島県</option>
	<option value="8">茨城県</option>
	<option value="9">栃木県</option>
	<option value="10">群馬県</option>
</select>

グループ化したいoption要素をoptgroup要素で囲みます。そして、label属性に、表示されるテキストを指定して下さい。

HTML

<select name="prefecture">
	<optgroup label="北海道地方">
		<option value="1">北海道</option>
	</optgroup>
	<optgroup label="東北地方">
		<option value="2">青森県</option>
		<option value="3">岩手県</option>
		<option value="4">宮城県</option>
		<option value="5">秋田県</option>
		<option value="6">山形県</option>
		<option value="7">福島県</option>
	</optgroup>
	<optgroup label="関東地方">
		<option value="8">茨城県</option>
		<option value="9">栃木県</option>
		<option value="10">群馬県</option>
	</optgroup>
</select>

optgroup要素にdisabled属性を付けると、そのグループの項目をまとめて選択不可の状態にできます。

HTML

<select name="prefecture">
	<optgroup label="北海道地方">
		<option value="1">北海道</option>
	</optgroup>
	<optgroup label="東北地方" disabled>
		<option value="2">青森県</option>
		<option value="3">岩手県</option>
		<option value="4">宮城県</option>
		<option value="5">秋田県</option>
		<option value="6">山形県</option>
		<option value="7">福島県</option>
	</optgroup>
	<optgroup label="関東地方">
		<option value="8">茨城県</option>
		<option value="9">栃木県</option>
		<option value="10">群馬県</option>
	</optgroup>
</select>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜optgroup要素＞ - セレクトフォームの項目のグループ化</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/optgroup/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>optgroup要素は、option要素をグループ化するための要素です。</p>

<form action="./form.php">
	<select name="aaa">
		<!-- 1つ目のグループ -->
		<optgroup label="Aグループ">
			<option value="AAA">AAA</option>
			<option value="BBB">BBB</option>
			<option value="CCC">CCC</option>
		</optgroup>

		<option value="DDD">DDD</option>

		<!-- 2つ目のグループ -->
		<optgroup label="Bグループ">
			<option value="EEE">EEE</option>
		<option value="FFF">FFF</option>
		</optgroup>

		<option value="GGG">GGG</option>
		<option value="HHH">HHH</option>
		<option value="III">III</option>
	</select>

	<button>送信</button>
</form>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/657/"> <meta charset="utf-8"> <title>【デモ】＜optgroup要素＞ - セレクトフォームの項目のグループ化</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/optgroup/"> </head> <body>

<p>optgroup要素は、option要素をグループ化するための要素です。</p> <form action="./form.php"> <select name="aaa">  <optgroup label="Aグループ"> <option value="AAA">AAA</option> <option value="BBB">BBB</option> <option value="CCC">CCC</option> </optgroup> <option value="DDD">DDD</option>  <optgroup label="Bグループ"> <option value="EEE">EEE</option> <option value="FFF">FFF</option> </optgroup> <option value="GGG">GGG</option> <option value="HHH">HHH</option> <option value="III">III</option> </select> <button>送信</button> </form>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>