HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<fieldset>
フィールドセット（Fieldset）要素。フォーム内の関連するコントロール（入力欄など）をグループ化します。
info
概要
<fieldset> 要素は、Webフォーム内の複数のコントロール（<input>, <textarea>, <select> など）を論理的にグループ化するために使用されます。
通常、グループのキャプション（タイトル）を定義するために、最初の子要素として <legend> 要素を含めます。
グループ化により、フォームの構造が分かりやすくなり、特にスクリーンリーダーなどのアクセシビリティが向上します。
play_circle
デモ (静的表示)
HTML (Source)
<form>
<fieldset>
<legend>連絡先情報</legend>
<label for="name">名前:</label>
<input type="text" id="name">
<br>
<label for="email">メール:</label>
<input type="email" id="email">
</fieldset>
<button type="submit">送信</button>
</form>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| disabled | 論理属性。この属性が存在する場合、<fieldset> 内の全てのフォームコントロールが**無効化**され、フォーム送信に含まれなくなります。 |
| form | この <fieldset> が関連付けられる <form> 要素の id を指定します。これにより、<fieldset> を <form> 要素の外に配置することが可能になります。 |
| name | フィールドセットの名前を指定します。無効化されていない場合、グループ化されたデータをサーバーに送信する際に使用されます。（ただし、通常は内部のフォームコントロールの name が使用されます。） |
code
実用例
1. ラジオボタンのグループ化とキャプション
<form>
<fieldset>
<legend>ご希望の配送方法</legend>
<input type="radio" id="normal" name="delivery" value="normal">
<label for="normal">通常配送</label><br>
<input type="radio" id="express" name="delivery" value="express">
<label for="express">速達</label>
</fieldset>
</form>
2. フィールドセット全体を無効化する
<form>
<fieldset disabled>
<legend>このセクションは一時的に無効です</legend>
<input type="text" value="入力不可">
</fieldset>
</form>
3. form属性でフォーム外に配置する
<form id="main-form">
<input type="text" name="data1">
</form>
<div>
<!-- フォーム本体の外にあるが、form="main-form" で関連付けられる -->
<fieldset form="main-form">
<legend>追加データ</legend>
<input type="text" name="data2">
</fieldset>
</div>
lightbulb
知っておくべき重要事項
accessibility_new
アクセシビリティの向上
<fieldset> と <legend> を使用することで、スクリーンリーダーのユーザーにフォームのセクション全体を意味のあるグループとして認識させることができます。これにより、フォーム全体の構造とナビゲーションが大幅に改善されます。特にラジオボタンやチェックボックスのグループには必須とされています。
format_shapes
デザインと表示
多くのブラウザでは、
多くのブラウザでは、
<fieldset> はデフォルトで細い枠線（ボーダー）と若干のパディングで表示されます。また、<legend> はその枠線の上に重なるように表示されるのが一般的です。これらのデフォルトスタイルは、CSSで自由にカスタマイズ可能です。