HTML / 要素

fieldset要素の使い方

HTMLのfieldset要素は、関係のあるフォーム部品をひとつのグループにまとめるための要素です。たとえば、「どの連絡方法を使いますか？」という質問と、その選択肢をまとめるときに使います。

先に結論

fieldsetには、グループ全体の名前になるlegendを置きます。個々の入力欄や選択肢には、それぞれlabelを付けます。

見た目の枠を作ることだけが目的ではありません。グループの意味を、画面を見ている人にも支援技術を使っている人にも伝えるための要素です。

最小の例

<fieldset>
  <legend>連絡方法</legend>
  <label>
    <input type="radio" name="contact" value="email">
    メール
  </label>
  <label>
    <input type="radio" name="contact" value="phone">
    電話
  </label>
</fieldset>

legendが「連絡方法」というグループ名、2つのlabelがそれぞれの選択肢の名前を担当しています。

実際に表示すると

枠線の見た目はブラウザーやCSSによって変わります。大切なのは、関連する部品が同じ質問のグループであることをHTMLで表している点です。

fieldset、legend、labelの役割

要素	担当するもの	例
`fieldset`	関係のあるフォーム部品をグループにする	連絡方法の選択肢全体
`legend`	グループ全体の名前や質問を示す	連絡方法
`label`	個々の入力欄や選択肢の名前を示す	メール、電話

fieldsetでまとめるとよい場面

同じ質問に答える複数のラジオボタンやチェックボックスをまとめるときに、特に役立ちます。

連絡方法を「メール」「電話」から選ぶ。
利用したいサービスを複数選ぶ。
住所の「郵便番号」「都道府県」「市区町村」をひとつのまとまりとして示す。

単にフォーム全体を囲む要素ではありません。フォーム全体にはform、質問ごとのグループにはfieldsetを使い分けます。

disabledでグループを無効にする

<fieldset disabled>
  <legend>現在は選べません</legend>
  <label><input type="radio" name="plan" value="basic"> ベーシック</label>
  <label><input type="radio" name="plan" value="pro"> プロ</label>
</fieldset>

fieldsetにdisabledを付けると、最初のlegendの中にあるものを除き、子孫のフォーム部品が無効になります。グループ内の部品を一つずつ無効にするより、意図が分かりやすくなる場合があります。

よくある間違い

divだけで選択肢を囲み、グループ名をHTMLで示さない。
legendを省略して、グループが何についてのものか分からなくする。
グループ名のlegendだけで、個々の部品のlabelを省略する。
fieldsetにnameを書けば、そのグループ自体が送信されると思う。送信されるのは、通常、グループ内のフォーム部品です。

Atlasで確認する

content model、フォームとの関連付け、disabledの適用範囲、HTMLFieldSetElement API、アクセシビリティツリーへの関係まで確認したい場合は、Yugien Atlasのfieldset要素を参照してください。個々の部品との関連付けはlabel要素、フォーム全体の送信はform要素でも説明しています。