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インタフェースは次のプロパティを持つ。

HTMLLegendElementのプロパティ
プロパティ 型 説明
accessKey DOMString accessKey属性
className DOMString class属性
form HTMLFormElement legendが属するform要素（読み取り専用）
dir DOMString 要素の記述方向
id DOMString id属性
innerHTML DOMString 要素内のHTML
innerText DOMString ノードの描画されるテキスト
lang DOMString 要素のlang属性
style CSSStyleDeclaration style属性
tagName String 要素のタグ名（読み取り専用）
title DOMString title属性

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

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

コンテンツモデル

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

関連記事

<fieldset>

<form>

<label>

<optgroup>

<option>

参考文献

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