HTML辞書ホームへ
HTML要素辞書 by Sentaro
<label>
ラベル（Label）要素。フォームの入力コントロール（<input>, <textarea>, <select>など）に説明文を関連付けます。
info
概要
<label> 要素は、ユーザーインターフェースにおけるフォームコントロールの説明文を提供します。
これを使うことで、ユーザーがラベルのテキストをクリックまたはタップしたときに、関連付けられたフォームコントロールが自動的にフォーカスされたり、チェックが入ったりするようになります。これはアクセシビリティ（特にスクリーンリーダー利用者）を大きく向上させます。
play_circle
静的デモ
HTML
<!-- for属性で関連付ける方法 -->
<label for="username">ユーザー名:</label>
<input type="text" id="username">
<br><br>
<!-- 要素を内包する方法 -->
<label>
<input type="checkbox" name="agree">
利用規約に同意する
</label>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| for | このラベルが関連付けられるフォームコントロールのID（id属性の値）を指定します。これを使用することで、ラベルとコントロールを明示的に関連付けます。 |
| form | ラベルが属するフォームのIDを指定します。これは、ラベルとコントロールが同じフォーム内になくても関連付けたい場合に使用されます。 |
code
実用例
1. `for`属性を使用したラジオボタンのラベル
<input type="radio" id="opt1" name="choice" value="A">
<label for="opt1">
選択肢 A
</label>
<br>
<input type="radio" id="opt2" name="choice" value="B">
<label for="opt2">
選択肢 B
</label>
2. チェックボックスを内包するラベル
<label>
<input type="checkbox" name="mail">
メールマガジンの購読
</label>
3. テキストエリアのラベル
<label for="message">お問い合わせ内容:</label>
<textarea id="message" rows="4"></textarea>
lightbulb
知っておくと良い知識
security
<label>要素は、対応するフォームコントロールを内包しない限り、必ず `for` 属性を指定し、関連付けるコントロールの `id` と一致させる必要があります。これは、スクリーンリーダーや支援技術がフォームの構造を正しく理解するために不可欠です。
<label>要素は、対応するフォームコントロールを内包しない限り、必ず `for` 属性を指定し、関連付けるコントロールの `id` と一致させる必要があります。これは、スクリーンリーダーや支援技術がフォームの構造を正しく理解するために不可欠です。
accessibility_new
クリック領域の拡大
<label>とフォームコントロールを関連付ける最大の利点の一つは、ラベルのテキストをクリックするだけでコントロール（チェックボックスなど）を操作できることです。これにより、特にタッチデバイスでの操作性が向上し、アクセシビリティが向上します。
<label>とフォームコントロールを関連付ける最大の利点の一つは、ラベルのテキストをクリックするだけでコントロール（チェックボックスなど）を操作できることです。これにより、特にタッチデバイスでの操作性が向上し、アクセシビリティが向上します。