legend要素

legend要素は、fieldset要素でグループ化した範囲のキャプション(表題)を表す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト fieldset要素の子要素として使用できる。
コンテンツ・モデル フレージング・コンテンツ
属性 グローバル属性
ブラウザ対応

構文

<fieldset>
	<legend>キャプション(表題)</legend>
</fieldset>

要点

  • legend要素は、fieldset要素でグループ化した範囲のキャプション(表題)を表す要素である。
  • ほとんどのブラウザは、グループ化した範囲の左上辺りにキャプションを表示する。

サンプルコード

<fieldset>
	<legend>好きなスポーツ(複数回答可)</legend>
	<p>
		<label>
			<input type="checkbox" name="sampleSports[]" value="サッカー">
			サッカー
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="フットサル">
			フットサル
		</label>
		<label>
			<input type="checkbox" name="sampleSports[]" value="その他">
			その他
		</label>
	</p>
</fieldset>

サンプル

HTMLソースコード

<style scoped>
	#sampleForm > fieldset {
		margin: 1em 0;
	}
	#sampleForm > fieldset label {
		margin-right: 1.5em;
	}
</style>
<form action="sample-fieldset.php" method="post" target="_blank" id="sampleForm">
	<fieldset>
		<legend>パーソナルデータ</legend>
		<p>
			年齢: 
			<label>
				<input type="radio" name="sampleAge" value="10代">
				10代
			</label>
			<label>
				<input type="radio" name="sampleAge" value="20代">
				20代
			</label>
			<label>
				<input type="radio" name="sampleAge" value="30代">
				30代
			</label>
			<label>
				<input type="radio" name="sampleAge" value="40代">
				40代
			</label>
			<label>
				<input type="radio" name="sampleAge" value="50代">
				50代
			</label>
			<label>
				<input type="radio" name="sampleAge" value="60代以上">
				60代以上
			</label>
		</p>
		<p>
			出身地: 
			<label>
				<input type="radio" name="sampleArea" value="関東地方">
				関東地方
			</label>
			<label>
				<input type="radio" name="sampleArea" value="関西地方">
				関西地方
			</label>
			<label>
				<input type="radio" name="sampleArea" value="中部地方">
				中部地方
			</label>
			<label>
				<input type="radio" name="sampleArea" value="その他">
				その他
			</label>
		</p>
	</fieldset>
	<fieldset>
		<legend>好きなスポーツ(複数回答可)</legend>
		<p>
			<label>
				<input type="checkbox" name="sampleSports[]" value="サッカー">
				サッカー
			</label>
			<label>
				<input type="checkbox" name="sampleSports[]" value="フットサル">
				フットサル
			</label>
			<label>
				<input type="checkbox" name="sampleSports[]" value="テニス">
				テニス
			</label>
			<label>
				<input type="checkbox" name="sampleSports[]" value="バスケットボール">
				バスケットボール
			</label>
			<label>
				<input type="checkbox" name="sampleSports[]" value="野球">
				野球
			</label>
			<label>
				<input type="checkbox" name="sampleSports[]" value="卓球">
				卓球
			</label>
			<label>
				<input type="checkbox" name="sampleSports[]" value="その他">
				その他
			</label>
		</p>
	</fieldset>
	<fieldset>
		<legend>好きな色(複数回答可)</legend>
		<p>
			<label>
				<input type="checkbox" name="sampleColors[]" value="赤">
				赤
			</label>
			<label>
				<input type="checkbox" name="sampleColors[]" value="青">
				青
			</label>
			<label>
				<input type="checkbox" name="sampleColors[]" value="緑">
				緑
			</label>
			<label>
				<input type="checkbox" name="sampleColors[]" value="黄">
				黄
			</label>
			<label>
				<input type="checkbox" name="sampleColors[]" value="白">
				白
			</label>
			<label>
				<input type="checkbox" name="sampleColors[]" value="黒">
				黒
			</label>
			<label>
				<input type="checkbox" name="sampleColors[]" value="シルバー">
				シルバー
			</label>
			<label>
				<input type="checkbox" name="sampleColors[]" value="ゴールド">
				ゴールド
			</label>
			<label>
				<input type="checkbox" name="sampleColors[]" value="その他">
				その他
			</label>
		</p>
	</fieldset>
	<p>
		<button type="submit">送信</button>
	</p>
</form>

実際の表示

パーソナルデータ

年齢: 

出身地: 

好きなスポーツ(複数回答可)

好きな色(複数回答可)