fieldsetとlegendタグを使って見やすいフォームを作成する方法

1. fieldsetタグとは？

<fieldset>タグは、フォーム内で関連する複数の入力要素（例：テキストフィールド、チェックボックス、ラジオボタンなど）をグループ化するためのタグです。このタグを使うことで、フォームのセクションを視覚的に区切ることができ、ユーザーにとって理解しやすいフォームを提供できます。

特徴

• フォームの視覚的な区切り：<fieldset>はデフォルトで境界線を持ち、フォーム内の異なるセクションを区別します。
• アクセシビリティの向上：<fieldset>を使用することで、スクリーンリーダーがフォームのセクションを理解しやすくなります。

2. legendタグとは？

<legend>タグは、<fieldset>のラベルを指定するために使われます。<fieldset>内の最初の要素として配置され、セクションのタイトルを提供します。これにより、ユーザーはそのセクションが何を目的としているのかをすぐに理解することができます。

特徴

• セクションのタイトルを表示：<legend>は、グループ化されたフォーム要素の説明を提供し、フォームの各部分を明確にします。
• アクセシビリティの向上：<legend>は、スクリーンリーダーにとっても重要な情報であり、視覚障害のあるユーザーにとってセクションの内容を理解しやすくします。

3. 基本的なfieldsetとlegendの使い方

以下のコード例では、<fieldset>と<legend>を使ってフォームの異なるセクションを作成します。この例では、ユーザーの基本情報と連絡情報を2つの異なるグループに分けています。

<!-- 基本情報セクション -->
<fieldset>
  <legend>基本情報</legend>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="dob">生年月日:</label>
  <input type="date" id="dob" name="dob" required>
</fieldset>

<!-- 連絡情報セクション -->
<fieldset>
  <legend>連絡情報</legend>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="phone">電話番号:</label>
  <input type="tel" id="phone" name="phone">
</fieldset>

コードの解説

1. <fieldset>の使用
   <fieldset>タグを使用して、フォームの各セクション（基本情報と連絡情報）をグループ化しています。これにより、フォームが視覚的に区切られ、ユーザーにとって入力しやすくなります。
2. <legend>の使用
   <legend>タグは、各<fieldset>内の最初の要素として配置され、セクションのタイトル（「基本情報」「連絡情報」）を表示します。これにより、各セクションの目的が明確になります。
3. ラベルと入力要素の連携
   <label>タグを使って、各入力フィールドのラベルを設定しています。for属性と対応する入力フィールドのidをリンクすることで、クリックした際に関連する入力フィールドがフォーカスされるようにしています。

見た目の効果

上記のコードを実装すると、フォームは以下のように表示されます：

• 「基本情報」と「連絡情報」の2つのセクションに分かれ、それぞれのセクションには囲み線がつきます。
• セクションの上部にタイトルが表示され、各セクションの目的がユーザーにとって明確になります。

4. fieldsetとlegendを使った応用例

<fieldset>と<legend>を使って、さらに複雑なフォームを作成することも可能です。以下は、ユーザーがニュースレターの購読方法を選択するためのラジオボタンとチェックボックスを含むフォームの例です。

<!-- ニュースレターの購読方法 -->
<fieldset>
  <legend>ニュースレターの購読方法</legend>
  <label>
    <input type="radio" name="subscription" value="daily" checked>
    毎日受け取る
  </label><br>

  <label>
    <input type="radio" name="subscription" value="weekly">
    毎週受け取る
  </label><br>

  <label>
    <input type="radio" name="subscription" value="monthly">
    毎月受け取る
  </label>
</fieldset>

<!-- 興味のあるトピックの選択 -->
<fieldset>
  <legend>興味のあるトピック</legend>
  <label>
    <input type="checkbox" name="topics" value="technology">
    テクノロジー
  </label><br>

  <label>
    <input type="checkbox" name="topics" value="sports">
    スポーツ
  </label><br>

  <label>
    <input type="checkbox" name="topics" value="fashion">
    ファッション
  </label>
</fieldset>

コードの解説

• 複数の選択肢をグループ化
  ラジオボタン（購読方法）とチェックボックス（興味のあるトピック）をそれぞれ<fieldset>でグループ化しています。これにより、ユーザーは関連する選択肢を一目で理解できます。
• 各セクションの説明を明確にする
  <legend>タグで「ニュースレターの購読方法」と「興味のあるトピック」というタイトルを設定し、それぞれのグループの意味を明確に示しています。

まとめ

<fieldset>と<legend>タグを使用すると、フォーム内の関連する要素を視覚的にグループ化し、ユーザーにわかりやすいフォームを作成することができます。これらのタグを使用することで、フォームのアクセシビリティが向上し、スクリーンリーダーや他の支援技術を使用するユーザーにとっても情報がより理解しやすくなります。

この記事を参考に、見やすく使いやすいフォームを作成し、ユーザー体験を向上させましょう！