コントロールに追加情報を与えるlabel要素
| 自分はブロック要素かインライン要素か |
インライン |
| 含むことができる要素型 |
インライン要素 |
| 名称の由来 |
はり札、付箋、ラベルを意味する単語 |
label要素はフォームコントロールに追加情報を与えるために利用されます。
for属性を使用して、ラベルとコントロールを関連付けることが可能です。ラベル要素がフォーカスを受けた場合、関連付いているコントロールにフォーカスが渡されます。
[htmlsrc]
1 | <label for="firstname">名: </label> |
2 | <input type="text" id="firstname" /><br /> |
3 | <label for="lastname">姓: </label> |
4 | <input type="text" id="lastname" /><br /> |
for属性を利用せずに暗示的にコントロールと関連付けることができることも可能です。その方法は、関連させたいコントロールをlabel要素の子とすることです（ラベル要素の内部にinput要素を記述する）。この場合、label要素が子にできるのは1つコントロールだけになります。
具体例を以下に示します。
2 | <input type="text" name="firstname" /> |