HTML - The correct way to encode a flag with a label

Question

I used formtastic to generate HTML forms in rails applications. My question, however, is really related to HTML.

Today I discovered strange behavior in the way formtastic generates checkboxes (fields like :boolean on formtastic lingo).

The remaining fields (non-checkboxes) are generated as follows:

 <li> <label for="my_textbox_field">My TextBox</label> <input id="my_textbox_field" type="text" ... > </li> 

The flags, however, are completely enclosed in <label> tags - like this:

 <li> <label for="my_boolean_field"> <input id="my_boolean_field" type="checkbox" ... > This is my boolean field </label> </li> 

The format philosophy seems to be based on the presentation of Learning to Love Forms . In fact, on slide 36 of this presentation, this structure is proposed for flags. I think in the presentation itself the host explained why this was done, but it is not written on the slides.

Can someone tell me why including labels inside the <label> might be a good idea, as opposed to placing them outside, e.g. with text fields?

Answer 1

The general user interface for entering text is either the label on the left:

 Email address: [____________________] 

Or above the caption above the entrance:

 Email address: [___________________________________] 

However, for the checkbox, the common UI for the label appears after input, for example:

 [x] Accept terms and conditions 

In the first two cases, it greatly simplifies the CSS that you must create if the label is in front of the input in the markup. It can be argued that the shortcut may wrap around the input though, but it is important here that the text comes in front of the input.

In the third example (check box), the text appears after the label, and again CSS is greatly simplified by placing the label in the right place in the markup order (after input).

So, the flags will always be different from the rest of the inputs. As for wrapping a flag with a label, it was only a personal preference, although I would say that since the input flags are different, having the input inside the label makes it easy to configure these inputs for styling with CSS, because the markup is different.

Answer 2

Can someone tell me why including labels inside the <label> might be a good idea

This might be a good idea, because in this case you might lose the id and for attributes, which will simplify the markup. When the <input> is inside the <label> , the connection between them is implicit. (See Section 17.9.1 HTML4.)

However, in practice, this does not work in IE, so you are losing this potential advantage.

I can only speculate in this case for layout / style.

Answer 3

In addition to the reasons mentioned in other answers, if <label> and <input> are separate, any spaces between them will be non-accumulative. This is probably not what you wanted. For example, a new line in this code will result in no clicks:

 <input id="my_boolean_field" type="checkbox" ... > <label for="my_boolean_field">This is my boolean field</label> 

Inserting an <input> inside the <label> avoids this, since the space is part of the label.

Real-time example: http://jsfiddle.net/xKLrS/2/