HTML Living Standard/fieldset

fieldset 要素

<fieldset> 要素は、フォーム内で関連するフォームコントロールをグループ化するために使用されます。この要素を使用することで、フォームの構造を明確にし、可読性とアクセシビリティを向上させることができます。

カテゴリ

• フローコンテンツ
• セクショニングルート

使用される文脈

• フローコンテンツが期待される場所

コンテンツモデル

• オプションで、最初に <legend> 要素を含む。
• その後に、任意のフローコンテンツ。

タグの省略

• 開始タグおよび終了タグは省略できません。

属性

<fieldset> 要素には以下の属性が使用できます：

• グローバル属性
• disabled — 要素内のフォームコントロールを無効化します。
  • この属性が設定されている場合、要素内のすべてのフォームコントロール（子 <input> や <select> など）はユーザーから操作できなくなります。
  • ただし、子 <legend> 要素は引き続きインタラクティブです。
• name — フォーム内でこのフィールドセットの名前を指定します（通常はスクリプトで利用されます）。

使用例

基本的な使用例

<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>

disabled 属性を使用した例

<fieldset disabled>
  <legend>支払い情報</legend>
  <label for="card">クレジットカード番号:</label>
  <input type="text" id="card" name="card">
</fieldset>

複数の <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>

  <fieldset>
    <legend>プロフィール情報</legend>
    <label for="fullname">フルネーム:</label>
    <input type="text" id="fullname" name="fullname">
    <label for="bio">自己紹介:</label>
    <textarea id="bio" name="bio"></textarea>
  </fieldset>
</form>

使用上の注意

• アクセシビリティ: <fieldset> と <legend> を組み合わせることで、スクリーンリーダーがグループ化されたフォームコントロールを正しく認識できるようになります。
• disabled 属性: <fieldset> に `disabled` 属性を設定すると、内部のフォームコントロールがすべて無効化されます。ただし、子 <legend> 要素は無効化されません。

関連仕様

• HTML Living Standard - fieldset
• MDN Web Docs - fieldset

参考情報

• <fieldset> 要素は、特に複雑なフォームを作成する際に有用です。視覚的なグループ化とアクセシビリティ向上の両方を目的として使用できます。
• <legend> 要素を適切に使用することで、フォームの目的をより明確に伝えることができます。