HTML / 要素

legend要素の使い方

HTMLのlegend要素は、fieldsetでまとめたフォーム部品のグループ名や質問を示す要素です。「どの連絡方法を使いますか？」のように、いくつかの選択肢に共通する説明を置くときに使います。

先に結論

legendは、通常、fieldsetの最初の子として置きます。グループ全体の名前を担当し、個々の入力部品の名前はそれぞれのlabelが担当します。

枠線の上に文字を表示するためだけの要素ではありません。HTMLの構造で「この選択肢は同じ質問に答えている」と伝えるために使います。

最小の例

<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が「メール」「電話」という個別の名前を示しています。

実際に表示すると

ブラウザーは、fieldsetの枠とlegendを関係付けて表示します。枠の形や文字の位置はブラウザーやCSSで変わることがありますが、グループ名をHTMLで示していることが大切です。

fieldset、legend、labelの役割

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

置く場所に注意する

legendは、fieldsetの先頭に置きます。説明用の要素を先に置くと、legendがグループの先頭のcaptionとして扱われない構造になります。

<!-- 基本の形 -->
<fieldset>
  <legend>配送方法</legend>
  <label><input type="radio" name="delivery" value="mail"> 郵送</label>
</fieldset>

<!-- legendが最初の子ではない形 -->
<fieldset>
  <p>配送方法を選びます。</p>
  <legend>配送方法</legend>
</fieldset>

通常のページ見出しには見出し要素を使い、フォーム部品のグループ名にはlegendを使います。

disabledとlegend

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

fieldsetにdisabledを付けると、最初のlegendの中にある部品を除き、子孫のフォーム部品が無効になります。この例では、legendの文字はグループの説明として残り、外側の入力部品が無効になります。

よくある間違い

divだけで選択肢を囲み、グループ全体の質問をHTMLで示さない。
legendをfieldsetの外に置く。
legendを置いたので、個々の入力部品にlabelは不要だと思う。
枠線の見た目だけをCSSで作り、グループの意味をHTMLに残さない。

Atlasで確認する

仕様上の置き場所、fieldsetのcaption、optgroupとの関係、disabledの適用範囲、HTMLLegendElement.form、アクセシビリティマッピングまで確認したい場合は、Yugien Atlasのlegend要素を参照してください。グループ全体はfieldset要素、個々の部品との関連付けはlabel要素でも説明しています。