HTML <legend>

HTMLの<legend>タグを使うと、入力Formのグループである<fieldset>に表題や説明文を表示することができます。その使い方をサンプルを交えてご紹介します。

構文

<fieldset>
  <legend>
    <!-- phrasing content -->
  </legend>
  <!-- flow content -->
</fieldset>

HTML

<form action="#">
  <fieldset>
    <legend>口座種別</legend>
    <input type="radio" name="account" value="s" id="s" checked>
    <label for="s">普通預金</label>
    <input type="radio" name="account" value="c" id="c">
    <label for="c">当座預金</label>
  </fieldset>
</form>

サンプル

属性

legendタグには次の属性を指定できます。

accessKey

アクセスキーを指定する。アクセスキーを指定すると、キーボード操作でリンク、ボタンおよび入力フォームへジャンプすることができる。アクセスキーの操作方法は、OSやウェブブラウザによって異なる。

アクセスキーの操作方法

OS	ウェブブラウザ	アクセスキーの操作方法
Linux	Chrome	Alt + Shift + アクセスキー
	Firefox	Alt + Shift + アクセスキー
Mac	Chrome	control + option + アクセスキー
	Firefox	control + option + アクセスキー
	Safari	control + option + アクセスキー
Windows	Chrome	Alt + アクセスキー
	Edge	Alt + アクセスキー
	Firefox	Alt + Shift + アクセスキー
	Internet Explorer	Alt + アクセスキー

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

<legend class="text-primary">
  Example
</legend>

dir

要素の記述方向を指定する。

id

要素の一意な識別子を指定する。

<legend id="account-type">
  Example
</legend>

lang

要素の言語を指定する。

ondblclick

要素がダブルクリックされたときに実行するJavaScriptを指定する。

style

CSSのプロパティを指定する。セミコロンで区切って複数のプロパティを指定できる。

<fieldset>
  <legend style="color: red;">
    Example
  </legend>
<fieldset>

Example

tabindex

入力フォーカスを受ける順序を数値で指定する。ただし、legend要素は入力を受け付けないので、指定しても意味はない。

title

タイトルを指定する。

<fieldset>
  <legend title="口座種別を次のうちから選んでください。">
    口座種別
  </legend>
  <input type="radio" name="account" value="s" id="s" checked>
  <label for="s">普通預金</label>
  <input type="radio" name="account" value="c" id="c">
  <label for="c">当座預金</label>
</fieldset>

口座種別

普通預金 当座預金

内容

legend要素の内容には記述コンテンツおよび見出し（h1 - h6）を含めることができる。

親要素

legend要素の親要素はfieldset要素である。

JavaScript

JavaScriptからはHTMLLegendElementインタフェースを通じてHTMLのlegend要素にアクセスできる。

HTMLLegendElementインタフェースは次のプロパティを持つ。

JavaScriptからHTMLLegendElementインタフェースを使ってlegendを操作する例を次に示します。

try {
  element = document.getElementById("account-type");
  form = element.form;
  accessKey = element.accessKey;
} catch (e) {
  console.error(e);
}

コンテンツモデル

legend要素はどのコンテンツモデルにも属さない。

参考文献

Web Hypertext Application Technology Working Group (2022) "The legend element" HTML Living Standard