HTML のフォームは、多くの Web サイトや Web アプリで利用される、ごく基本的な機能です。しかし、ふだん何気なく使っている要素には、「そういう仕様だったの？」と思うような便利な機能や、意外と知られていない仕様が数多く存在します。

そこでシリーズ企画として、「フォームを再履修する」をテーマに、実務で役立つ HTML フォームの知識を、複数回に分けて一緒に学んでいきたいと思います。

第１回であるこんかいは、「フォームを意味のある HTML として書く」をテーマにお送りします。

フォームコントロールを「グループ化する」

<fieldset> は、送信フォームの各フォームコントロールを、過去記事でご紹介した「セマンティクス的に」グループ化するためのタグです（お忘れの方や未読の方は、ぜひ復習してみましょう！）。アクセシビリティ上でも、これらのフォームコントロールはひとまとまりのグループとして扱われ、後述する <legend> が存在する場合、スクリーンリーダーはこのグループの説明として <legend> の内容を読み上げます。

それ以外にも、グループ化することで、以下のような操作が可能となります。

グループ単位での disabled 指定

そのグループに対し disabled を設定することで、グループ内のフォームコントロールをまとめて disabled にすることができます。

<p>このグループのフォームコントロールは全て disabled になる</p>
<fieldset disabled>
  <p><input type="checkbox" /></p>
  <p><input type="text" /></p>
  <p>
    <select>
      <option value="">選択してください</option>
    </select>
  </p>
</fieldset>

<legend> でグループに見出しを付けられる

<fieldset> 直下に <legend>グループの表示名</legend> と書くことで、そのグループに視覚的なまとまりを示す囲い線と、グループの表示名 が見出しとして表示されるようになります。

<fieldset>
  <!-- グループの見出しの設定 -->
  <legend>グループの見出し</legend>
  <p><input type="checkbox" /></p>
  <p><input type="text" /></p>
  <p>
    <select>
      <option value="">選択してください</option>
    </select>
  </p>
</fieldset>

先述したように、スクリーンリーダーではこの <legend> が「グループ名」として読み上げられるため、「このグループは、何を入力するための項目群なのか？」を、簡潔に・わかりやすく記述するよう心がけるとよいでしょう。

<fieldset> による「グループ化」とは、単に複数のフォームコントロールを線で囲うための要素ではありません。フォームコントロールにセマンティクスを与え、アクセシビリティの向上にも役立ちます。フォームを設計するときは、意味のある単位ごとに <fieldset> や <legend> を活用するとよいでしょう。

フォームコントロールを「関連付ける」

フォームコントロールは、単に <input> を置くだけでは十分ではありません。「この入力欄は何を入力するものなのか？」をユーザーへ伝え、「入力された値を何という名前で送信するのか？」をコンピュータへ伝える必要があります。

そのために利用するのが <label> タグと、name 属性です。どちらも HTML 自身が提供している仕組みです。

<label> はユーザーとの関連付け

<label> は、そのフォームコントロールが何を入力するためのものなのかを、ユーザーや支援技術へ伝えるタグです。書き方は、次の２つがあります。

• <label for="フォームコントロールの id 属性値"> と <input id="ラベルの for 属性値"> によって、ラベルとフォームコントロールを紐づけます。
• フォームコントロールを <label> の子要素にします。こうすると「for 属性と id 属性を使った関連付け」が不要になります。

個人的には後者のほうが、id の命名やページ内での重複を気にする必要がなくなり、マークアップもシンプルになるため、おすすめです。

<fieldset>
  <!-- グループの見出しの設定 -->
  <legend>グループの見出し</legend>
  <p><input type="checkbox" /></p>
  <p><input type="text" /></p>
  <p>
    <select>
      <option value="">選択してください</option>
    </select>
  </p>
</fieldset>

<label> は見た目のためではなく、「この入力欄は何か」をユーザーや支援技術へ伝える重要な要素です。加えて、チェックボックスやラジオボタンでは、ラベル部分をクリックしてもチェック状態を切り替えられるようになるため、操作性も向上します。

name は送信データとの関連付け

中級者の方でもうっかり忘れてしまいがちなのですが、例えば、

<input value="ABC">

だけでは、フォームの送信対象になりません。対象のフォームコントロールに name 属性を付けることで、初めて送信対象となります。

<input name="title" value="ABC">

上記の送信内容:

title=ABC

name は見た目には一切影響しませんが、フォーム送信では最も重要な属性です。

ラジオボタンは name でグループになる

また、ラジオボタン（ <input type="radio"> ）は name 属性の値で一つのグループとして扱われるフォームコントロールなので、ブラウザによるチェック状態の排他制御も name 属性で構成されたグループ単位となります。

<input type="radio" value="1" name="radio_a" checked>
<input type="radio" value="2" name="radio_a">
<!-- name 属性が異なると、排他制御の単位も異なる -->
<input type="radio" value="3" name="radio_b">

ラジオボタングループの required

ここで、ラジオボタンに関連して、required について。

ラジオボタングループに対する required 属性は、ラジオグループ内のいずれか1つに required を付ければ十分です。

<label>男性<input type="radio" value="1" name="gender" required></label>
<label>女性<input type="radio" value="2" name="gender"></label>
<label>無回答<input type="radio" value="0" name="gender"></label>

これだけで、ラジオボタングループに対する「必須項目」とすることができます。

まとめ

フォームを構成する要素には、それぞれ「何を表しているのか」という意味があります。<fieldset> や <label>、name を適切に使うことで、ユーザーにもブラウザにも伝わりやすいフォームを作れるようになります。こうした意味付けはアクセシビリティや保守性にもつながるため、ぜひ意識してマークアップしてみてください。

こんかいの「フォームのマークアップについて」は、ここまでです。お疲れ様でした。

次回は、このフォームをさらに入力しやすくするための「属性」に注目します。HTML が標準で備えている入力支援機能を活用して、JavaScript に頼らずユーザー体験を向上させる方法を、一緒に学んでいきましょう。お楽しみに！