label 要素

label 要素はユーザインタフェースにおける項目名を表します。

label 要素によって表された項目名は、特定のラベル付け可能な要素をラベル付け （関連付け） することが可能です。ラベル付けは、ラベル付け可能な要素を label 要素で内包するか、label 要素の for 属性に、対象としたいラベル付け可能な要素に付与した id 属性値を指定することで行えます。

label 要素に内包することでラベル付けを行う

ラベル付け可能な要素と、ラベルに使用したいテキストを label 要素で内包してしまうことでラベル付けを行います。例えば下記のような記述になります。

<label>お名前 <input type="text" name="name" /></label>

この場合、該当する label 要素によってラベル付けされていないラベル付け可能な要素を子孫にすることはできません。例えば下記のような記述は間違いです。for 属性によって内包されているフォーム関連要素とは異なる要素が指定されています。

<label for="address">お名前 <input type="text" name="name" /></label>

もし、label 要素内に複数のラベル付け可能な要素が内包された場合、最初の要素がラベル付け対象となります。

for 属性によってラベル付けを行う

ラベル付けを行いたいラベル付け可能な要素に対して付与した id 属性値を、label 要素の for 属性値に指定することでラベル付けを行います。例えば下記のような記述になります。

<input type="checkbox" name="sampleCheck" id="sampleCheck" />
<label for="sampleCheck">内容を確認しました</label>

下記に実際の表示サンプルを示しますが、項目名となるテキストをクリックすることで、ラベル付けされたチェックボックスを選択したりすることが可能になります。

<label>
 <input type="checkbox" name="sampleCheck"> 内容を確認しました
</label>

<input type="checkbox" name="sampleCheck" id="sampleCheck">
<label for="sampleCheck">内容を確認しました</label>

IE11	○
Edge（EdgeHTML）	○
Edge（Chromium）	○
Chrome	○
Firefox	○
Safari	○
iOS Safari	○
Android Chrome	○