HTML Living Standard/label

label 要素

<label> 要素は、ユーザーインターフェース内のフォームコントロールのラベルを定義するために使用されます。フォームコントロールに関連付けることで、アクセシビリティが向上し、ユーザーがラベルをクリックするとフォームコントロールにフォーカスが移動するようになります。

カテゴリ

フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
可視ラベル可能な要素

使用される文脈

フローコンテンツまたはフレージングコンテンツが期待される場所

コンテンツモデル

フレージングコンテンツ。ただし、他のラベル付きフォームコントロール（<label> 要素）を子孫要素として含めることはできません。

タグの省略

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

属性

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

グローバル属性
for — ラベルが関連付けられるフォームコントロールの id 属性値。for 属性を使用しない場合、ラベルの子要素としてフォームコントロールを含める必要があります。

使用例

for 属性を使用した関連付け

<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">

子要素としてフォームコントロールを含める方法

<label>
  パスワード:
  <input type="password" name="password">
</label>

複数のラベルを使用する例

<form>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">

  <label for="phone">電話番号:</label>
  <input type="tel" id="phone" name="phone">
</form>

使用上の注意

アクセシビリティ: ラベルを正しく関連付けることで、スクリーンリーダーを使用しているユーザーに対してフォームの内容を分かりやすく説明できます。
for 属性の使用: 可能であれば for 属性を使用してフォームコントロールとラベルを明示的に関連付けることが推奨されます。
クリック可能領域: <label> 要素を使用すると、ラベル部分をクリックするだけでフォームコントロールがアクティブになります。

参考情報

<label> 要素を使用することで、フォームの可用性とユーザーエクスペリエンスが大幅に向上します。特に、視覚的なラベルとフォームコントロールを正確に対応付けることで、より直感的な操作が可能となります。