label - フォーム・コントロールのキャプション(ラベル)

for属性とフォーム・コントロールのid属性を一致させる、またはlabel要素の子要素にフォーム・コントロールを入れることで関連付けることができます。
関連付けることで、label要素をクリックするだけでフォームコントロールにアクセスできるようになります。これによるUXを

label要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
label

label要素のHTML4からHTML5への変更点

HTML5では、新しくform属性が追加されました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
for フォーム・コントロールとラベルを関連付けます。
関連付けるためには、対象のフォーム・コントロール要素にid属性を指定します
form 明示的に label要素をフォームオーナー(form要素)と結びつける
関連付けるためにはl、対象のform要素にid属性を指定します

「基本」のサンプル

HTMLコード

<form>
<label><input type="checkbox">for属性を指定しない場合一部ブラウザではフォームコントロールと関連づけられません</label><br>
<label for="label1"><input type="checkbox" id="label1">for属性とid属性値を一致させることで関連付けることができます</label><br>
<input type="checkbox" id="label2"><label for="label2">for属性とid属性値を一致させることで関連付けることができます</label><br>
<input type="submit" value="送信">
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

「form属性」のサンプル

HTMLコード

<label form="example"><input type="checkbox" name="label" id="label1">form属性とform要素のid属性値を一致させることで関連付けることができます</label><br>		
<form id="example" method="get">
<input type="submit" value="送信">
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「form属性」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/forms.html#the-label-element)