フォーム内の関連する要素のグループ：
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
Try it Yourself ❯
<fieldset> タグは、フォーム内の関連する要素をグループ化するために使用します。
<fieldset> タグは、関連する要素の周りにボックスを描画します。
| 要素 | |||||
|---|---|---|---|---|---|
| <fieldset> | Yes | Yes | Yes | Yes | Yes |
チップ: <legend> タグは、<fieldset> 要素の見出しを定義します。
HTML5 では、<fieldset> 用の新しい属性が追加されました。
= HTML5 で新規追加。
| 属性 | 値 | 説明 |
|---|---|---|
| disabled | disabled | 関連するフォーム要素のグループを無効にする |
| form | form_id | フィールドセットが属する 1 つ以上のフォームを指定する |
| name | text | フィールドセットの名前を指定する |
<fieldset> タグは、HTML のグローバル属性もサポートします。
<fieldset> タグは、HTML のイベント属性もサポートします。
HTML DOM リファレンス：Fieldset オブジェクト
ほとんどのブラウザは、次のデフォルト値を使用して <fieldset> 要素を表示しています：
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}