html - ラベルタグ内にフォームフィールドを配置することは良い考えですか、それとも悪い考えですか？

Question

多くのフレームワーク、自動生成されたコード（Zend）、およびレイアウトテンプレートでこの傾向に気づきました。私が話しているアプローチはそのようなものです：

<label for="someField">
    <input id="someField" name="someName" />
</label>

このアプローチと通常のアプローチの長所と短所は何ですか。また、なぜ人々はこのアプローチを採用する傾向があるのでしょうか。

Answer 1

HTML4.01とHTML5の両方でW3C標準から判断すると問題ないようです。

HTML4：

「ラベルを別のコントロールに暗黙的に関連付けるには、コントロール要素がLABEL要素のコンテンツ内にある必要があります。この場合、LABELには1つのコントロール要素のみを含めることができます。ラベル自体は、関連付けられたコントロールの前または後に配置できます。」

この例では、ラベルをテキスト入力コントロールに暗黙的に関連付けます。

<form action="..." method="post">
  <p>
    <label>
      First Name
      <input type="text" name="firstname">
    </label>
  </p>
</form>

HTML5の時点ではまだ問題ありません。

「label要素は、ユーザーインターフェイスでキャプションを表します。キャプションは、for属性を使用するか、フォームコントロールをラベル要素自体の中に配置することにより、ラベル要素のラベル付きコントロールと呼ばれる特定のフォームコントロールに関連付けることができます。W3C。