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