HTML Living Standard/legend

legend 要素

<legend> 要素は、フォーム内の <fieldset> 要素に説明を提供するために使用されます。この要素を使用することで、フォームグループの目的を明確にし、アクセシビリティを向上させることができます。

カテゴリ

• フローコンテンツ
• フレージングコンテンツ

使用される文脈

• 直接の親要素が <fieldset> 要素である場合に使用できます。

コンテンツモデル

• フレージングコンテンツ。

タグの省略

• 開始タグおよび終了タグは省略できません。

属性

<legend> 要素には以下の属性が使用できます：

• グローバル属性 — すべてのHTML要素で共通の属性。

使用例

基本的な使用例

<fieldset>
  <legend>アカウント情報</legend>
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username">
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password">
</fieldset>

スタイルを適用した例

<fieldset>
  <legend style="font-weight: bold; color: blue;">連絡先情報</legend>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  <label for="phone">電話番号:</label>
  <input type="tel" id="phone" name="phone">
</fieldset>

使用上の注意

• アクセシビリティ: <legend> 要素を使用すると、スクリーンリーダーが <fieldset> 内のフォームグループの目的を正しく伝えることができます。
• 位置: <legend> 要素は <fieldset> 要素の最初の子要素として配置する必要があります。
• スタイリング: デフォルトのスタイルを上書きしたい場合、CSSを使用してカスタマイズできます。

非推奨の使用法

• <legend> 要素を <fieldset> 要素の外で使用することはできません。仕様に違反し、意図したアクセシビリティ効果が得られなくなります。

関連仕様

• HTML Living Standard - legend
• MDN Web Docs - legend

参考情報

• <legend> 要素は、フォーム内で関連するコントロールのグループに説明を付けるための最適な方法です。
• <legend> 要素を適切に使用することで、フォームの可読性とアクセシビリティが向上します。