fieldset要素
fieldset要素は、入力欄などのフォーム部品をグループ化する要素。
| カテゴリー | フロー・コンテンツ、セクショニング・ルート、パルパブル・コンテンツ、フォーム関連要素、form.elementsとfieldset.elementsのAPIのリストに含まれるフォーム関連要素。 |
|---|---|
| コンテキスト |
フロー・コンテンツを内包できる要素内で使用できる。 |
| コンテンツ・モデル | ０個以上１個未満のlegend要素、次に、フロー・コンテンツ。 |
| 属性 |
グローバル属性。 disabled属性、form属性、name属性。 |
| ブラウザ対応 |      |
構文
<fieldset></fieldset>
要点
- fieldset要素は、入力欄などのフォーム部品をグループ化する要素である。
- ほとんどのブラウザは、グループ化した範囲を、境界線で囲む。
- legend要素を使い、グループ化した範囲のキャプション（表題）を付けることもできる。
属性
任意属性
| 属性 | 説明 |
|---|---|
| disabled属性 | グループ化した範囲を無効にする属性。 |
| form属性 | グループ化した範囲が所属するform要素を指定する属性。 |
| name属性 | グループ化した範囲の名前を指定する属性。 |
サンプルコード
<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>