HTML - Correct way of coding a checkbox with a Label.
- by egarcia
I've been using formtastic in order to generate HTML forms on rails applications. My question, however, is really HTML-related.
Today I found a strange behaviour on the way formtastic generates checkboxes (fields of type :boolean on formtastic lingo).
The rest of the fields (non-checkboxes) are generated this way:
<li>
<label for="my_textbox_field">My TextBox</label>
<input id="my_textbox_field" type="text" ... >
</li>
Checkboxes, however, are enclosed inside their <label> tags completely - like this:
<li>
<label for="my_boolean_field">
<input id="my_boolean_field" type="checkbox" ... >
This is my boolean field
</label>
</li>
Formtastic phylosophy seems to be based on the Learning to Love Forms 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.
Can anyone tell me why enclosing checkboxes inside their <label> tag might be a good idea, as opposed to putting them outside, like with textboxes?
