【HTML】<fieldset>フィールドセット要素とは

<fieldset>フィールドセット要素について調べた

developer.mozilla.org

<fieldset> は、HTML でフォームコントロールをグループ化するための要素

主に関連する入力フィールドを視覚的または意味的にまとめるのに使う

以下が特徴

1. グループ化
   <fieldset> は関連するフォーム要素をグループ化し、ユーザーにそれを示す

2. ラベル付け
   <legend> タグを使って、フィールドセット全体の説明を提供できる

3. アクセシビリティ
   スクリーンリーダーなどでフィールドセットの意味が伝わりやすくなる
   https://waic.jp/translations/WCAG-TECHS/H71.html

4. スタイリング
   デフォルトで枠線（ボーダー）が付き、フォーム全体が分かりやすくなる

---

使用例

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

    <label for="email">メール:</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>支払い情報</legend>
    <label for="card">カード番号:</label>
    <input type="text" id="card" name="card"><br><br>

    <label for="expiry">有効期限:</label>
    <input type="text" id="expiry" name="expiry">
  </fieldset>

  <button type="submit">送信</button>
</form>

<fieldset> の主な属性

• disabled
  フィールドセット内のすべてのフォームコントロールを無効化する

  <fieldset disabled>
    <legend>無効なフィールドセット</legend>
    <input type="text" value="入力不可">
  </fieldset>

• name
  サーバーサイドでフィールドセットを識別するために使う