fieldsetタグ -フォーム内の関連する入力要素をグループ化する｜HTML辞典

<fieldset>タグとは？

<fieldset> タグは、フォーム内の関連する入力要素をグループ化するためのタグ です。
<legend> タグと組み合わせることで、フォームの各セクションに見出しをつけることができます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<fieldset> は開始タグ（<fieldset>）と閉じタグ（</fieldset>）の両方が必要です。

基本的な記述方法

<form>
    <fieldset>
        <legend>ユーザー情報</legend>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <label for="email">メール:</label>
        <input type="email" id="email" name="email">
    </fieldset>
</form>

使用できる主な属性

<fieldset> タグには少数の属性がありますが、以下がよく使われます。

属性名	説明	例
disabled	フィールドセット内のすべての入力を無効化	<fieldset disabled>...</fieldset>
form	関連付けるフォームの id を指定	<fieldset form="userForm">...</fieldset>
name	フィールドセットの名前を指定	<fieldset name="user-info">...</fieldset>

CSSを使ったデザイン変更

フィールドセットのスタイルを調整したい場合は、CSSを活用できます。

fieldset {
    border: 2px solid #ccc;
    padding: 15px;
    border-radius: 5px;
}

legend {
    font-weight: bold;
    padding: 5px;
}

適切な使用例

✅ fieldset を使用してフォームをグループ化する

<form>
    <fieldset>
        <legend>ログイン情報</legend>
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username">
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password">
    </fieldset>
</form>

✅ disabled を使用してグループ全体を無効化する

<fieldset disabled>
    <legend>会員情報</legend>
    <label for="member-id">会員ID:</label>
    <input type="text" id="member-id" name="member-id">
</fieldset>

適切でない使用例（誤った使い方）

❌ <fieldset> を <form> の外で使用すると意味がなくなる

<!-- NG: <form> の外に <fieldset> を配置 -->
<fieldset>
    <legend>個人情報</legend>
    <input type="text" name="name">
</fieldset>
<form action="submit.php">
    <button type="submit">送信</button>
</form>

✅ 正しい書き方（<form> の中に配置）

<form action="submit.php">
    <fieldset>
        <legend>個人情報</legend>
        <input type="text" name="name">
    </fieldset>
    <button type="submit">送信</button>
</form>

<fieldset>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<fieldset>	フォームの入力項目をグループ化	<legend> とセットで使う	フォームセクションの整理
<legend>	<fieldset> のタイトル	フォームのセクション見出しを追加	<fieldset> 内の見出し
<label>	フォーム要素のラベル	for 属性で <input> と関連付け可能	入力補助
<form>	フォームを作成	action に送信先を指定	データ送信フォーム

使用上の注意点

✅ legend を使用してフィールドセットのタイトルを明確にする

• <legend> がないと、フィールドセットの目的が分かりにくくなる。

✅ <fieldset> を <form> 内に配置する

• <fieldset> は <form> 内で使用するのが基本。

関連タグ

• <legend> – <fieldset> のタイトルを設定
• <form> – フォーム全体を作成
• <label> – 入力要素のラベルを設定
• <input> – ユーザー入力を受け付ける

まとめ

<fieldset>タグは、HTML文書内でフォームの関連する入力要素をグループ化するためのタグです。 <legend>と組み合わせて、フォーム内の情報を整理し、視認性を向上させるのが一般的な使い方です。