HTML

optgroup要素

 optgroup要素は、option要素で作成する選択肢をグループ化する際に使用します。 <optgroup>~</optgroup>の中に option要素を配置することで、選択肢をグループ化することができます。

 label属性は、選択肢グループにラベル(項目名)を付ける属性で、必ず指定する必要があります。 label属性は必須属性なので、optgroup要素で指定する選択肢グループは必ずグループ名を持つことになります。

 disabled属性は、option要素で作成する選択肢をグループごと無効にする場合に使用します。選択肢を個別に無効にする場合には、optgroup要素ではなく option要素に disabled属性を指定します。

属性

disabled属性
操作を無効にする(disabled)
label属性(必須属性)
選択肢グループにラベル(項目名)を付ける

使用例


<form action="xxxxxx.php" method="post">
<p>ご希望の旅行コースを選択してください。(※現在、宿泊コースはすべて満室となっています。)</p>
<p>
	<label>旅行企画名:
		<select name="course">
			<option selected>▼旅行コースを選択してください</option>
			<optgroup label="ご宿泊" disabled>
				<option value="stay01">【一泊二日】和食・温泉コース</option>
				<option value="stay02">【一泊二日】洋食・温泉コース</option>
				<option value="stay03">【一泊二日】食べ放題・温泉コース</option>
			</optgroup>
			<optgroup label="お食事とご入浴">
				<option value="lunch01">【日帰り】和食・温泉コース</option>
				<option value="lunch02">【日帰り】洋食・温泉コース</option>
				<option value="lunch03">【日帰り】食べ放題・温泉コース</option>
			</optgroup>
			<optgroup label="ご入浴のみ">
				<option value="spa01">【日帰り】温泉Aコース</option>
				<option value="spa02">【日帰り】温泉Bコース</option>
				<option value="spa03">【日帰り】名湯めぐりコース</option>
			</optgroup>
		</select>
	</label>
</p>
<p><input type=submit value="確認画面へ進む"></p>
</form>

ご希望の旅行コースを選択してください。(※現在、宿泊コースはすべて満室となっています。)