入力コントロールにおける項目名を表す

label

< label ラベル 属性="属性値">~< /label >

label要素は入力コントロールの項目名を表します。label要素によって表された項目名は、input要素のtype属性にcheckbox、radioを指定した場合など、ラベル付け可能なフォーム関連要素と関連付けできます。

カテゴリー ・インタラクティブコンテンツ
・パルパブルコンテンツ
・フレージングコンテンツ
・フローコンテンツ
コンテンツモデル ・フレージングコンテンツ
・そのlabel要素によってラベル付けされていない、ラベル付け可能なフォーム関連要素を子孫要素に持つことは不可
・label要素を子孫要素に持つことは不可
使用できる文脈 フレージングコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

for フォー

入力コントロールに付与したid 属性値を指定することで関連付けを行います。

form フォーム

任意のform要素に付与したid属性値を指定することで関連付けを行います。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

label要素で入力コントロールの項目名を表す方法は、以下の例のように2通りあります。前者は、入力コントロールをlabel要素で内包する方法です。後者は、入力コントロールとするフォーム関連要素のid属性に付与した名前を、label要素のfor属性に指定する方法です。
<!--入力コントロールを内包してラベルを付ける-->
<label>
<input type="checkbox" name="confirm">
内容を確認しました。
</label>
<!--for属性によって入力コントロールにラベルを付ける-->
<input type="checkbox" name="agreement" id="agreement" value="yes">
<label for="agreement"> 内容に同意します。</label>

関連記事