HTML `<legend>` フィールドセット凡例要素

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

<legend> は HTML の要素で、その親要素である <fieldset> の内容のキャプションを表します。

カスタマイズ可能な <select> 要素では、 <legend> 要素を <optgroup> 要素の子要素として指定することができ、これにより、ターゲット設定やスタイル設定が容易なラベルを提供できます。これは、 <optgroup> 要素の label 属性に設定されたテキストを置き換え、同じ意味を持ちます。

試してみましょう

<fieldset>
  <legend>好きなモンスターを選択</legend>

  <input type="radio" id="kraken" name="monster" value="K" />
  <label for="kraken">クラーケン</label><br />

  <input type="radio" id="sasquatch" name="monster" value="S" />
  <label for="sasquatch">サスカッチ</label><br />

  <input type="radio" id="mothman" name="monster" value="M" />
  <label for="mothman">モスマン</label>
</fieldset>

legend {
  background-color: black;
  color: white;
  padding: 3px 6px;
}

input {
  margin: 0.4rem;
}

属性

この要素には、グローバル属性以外の属性はありません。

例

<legend> の使用例は、 <form> のページを参照してください。

技術的概要

コンテンツカテゴリー	なし
許可されている内容	記述コンテンツおよび見出し（h1–h6 要素）
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	最初の子要素としてこの `<legend>` 要素を持つ `<fieldset>`。カスタマイズ可能な select 要素では、`<legend>` 要素を `<optgroup>` の子要素として使用することが許可されています。
暗黙の ARIA ロール	対応するロールなし
許可されている ARIA ロール	許可されている `role` なし
DOM インターフェイス	`HTMLLegendElement`