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>