title: HTML - Correct way of coding a checkbox with a Label
body: <p>I've been using <a href="http://github.com/justinfrench/formtastic" rel="noreferrer">formtastic</a> in order to generate HTML forms on rails applications. My question, however, is really HTML-related.</p>
  
  <p>Today I found a strange behaviour on the way formtastic generates checkboxes (fields of type <code>:boolean</code> on formtastic lingo).</p>
  
  <p>The rest of the fields (non-checkboxes) are generated this way:</p>
  
  <pre><code>&lt;li&gt;
    &lt;label for="my_textbox_field"&gt;My TextBox&lt;/label&gt;
    &lt;input id="my_textbox_field" type="text" ... &gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Checkboxes, however, are enclosed inside their <code>&lt;label&gt;</code> tags completely - like this:</p>
  
  <pre><code>&lt;li&gt;
    &lt;label for="my_boolean_field"&gt;
      &lt;input id="my_boolean_field" type="checkbox" ... &gt;
      This is my boolean field
    &lt;/label&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Formtastic philosophy seems to be based on the <a href="http://www.slideshare.net/AaronGustafson/learning-to-love-forms-web-directions-south-07" rel="noreferrer">Learning to Love Forms</a> presentation. In effect, on slide 36 of that presentation this structure is suggested for checkboxes. I guess in the presentation itself the presenter explained why this was done, but it is not written on the slides.</p>
  
  <p>Can anyone tell me why enclosing checkboxes inside their <code>&lt;label&gt;</code> tag might be a good idea, as opposed to putting them outside, like with textboxes?</p>