label要素のfor属性か、label要素の子要素、どちらが適切?

Question

label要素にフォームの部品を関連付ける場合、label要素のfor属性にフォームの部品のid属性値を振る場合と、label要素の子要素とする方法の2つがあります。

<input type="checkbox" id="cb" name="check">
<label for="cb">チェック</label>

<label><input type="checkbox" name="check">チェック</label>

このうち、後者のlabel要素の子要素とする方法は古いブラウザが対応していないという話を聞きました。
しかし実際の所、後者に対応していない古いブラウザって何なのでしょう?
また現在、それを考慮する必要はありますか?

IE6で対応していないなら考慮します。

Answer 1

label要素の子要素としてフォームを配置する場合に起きるトラブルとして、以下のようなものがあるとのことです。

・Railsなどのフレームワークで、自動生成したhiddenなinput要素の方に関連付けられてしまう（Qiitaより）
・IEでは6以下で非対応、7以上のみ動く
・Firefox 8以前で、イベントバブリングの挙動がおかしい（MDN）

Comments

[sounisi5011]

結構問題が多いのですね…