HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<label>
ラベル（Label）要素。フォームの入力コントロール（<input>, <textarea>, <select>など）に説明文を関連付けます。
info
概要
<label> 要素は、ユーザーインターフェースにおける**フォームコントロールの説明文**を提供します。
これを使うことで、ユーザーがラベルのテキストをクリックまたはタップしたときに、関連付けられたフォームコントロールが自動的にフォーカスされたり、チェックが入ったりするようになります。これはアクセシビリティ（特にスクリーンリーダー利用者）を大きく向上させます。
play_circle
デモ (静的表示)
HTML (Source)
<!-- 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
`for`属性の必須性（アクセシビリティ）
`
`
accessibility_new
クリック領域の拡大
`
`