12

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 philosophy 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?

sscirrus
  • 55,407
  • 41
  • 135
  • 228
kikito
  • 51,734
  • 32
  • 149
  • 189

3 Answers3

12

The common UI for a text input is either a label on the left:

Email address: [____________________]

Or the label above the input:

Email address:
[___________________________________]

For a checkbox however, the common UI is for the label to appear after the input, like this:

[x] Accept terms and conditions

For the first two cases, it drastically simplifies the CSS you have to create if the label comes before the input in the markup. One could argue that the label could wrap around the input still, but the important thing here is that the text comes before the input.

In the third example (the checkbox), the text comes after the label, and again, the CSS is greatly simplified by putting the label in the right place in the markup order (after the input).

So, the checkboxes were always going to be different to the rest of the inputs. In regards to the wrapping of the checkbox with a label, this was just a personal preference, although I'd argue that since the checkbox inputs are different, having the input inside the label makes it easier to target these inputs for styling with CSS, because the markup is different.

Justin French
  • 2,867
  • 19
  • 14
  • Hey, I got an answer from the formtastic guy! It makes more sense now, thank you. Just wondering, is there a formtastic option to control this behaviour (i.e. put the input after the label, instead of just inside)? – kikito Apr 27 '10 at 18:18
  • 3
    No. The irony is that in the last 24 hours I've been asked for this same request (a preference to move the checkbox out of the label) and also for all inputs to be moved inside the labels. Basically, this is all just code style and personal preference, and I really don't want to add that kind of complexity to the code at this time. The long term plan (I hope) is that you'll be able to customise the markup for everything through either a rendering engine or partials or something. – Justin French Apr 27 '10 at 20:41
  • Ok! Thanks again for answering. I'll keep monitoring your awesome project (which I'm using in production already - very cool!) – kikito Apr 27 '10 at 21:51
7

Can anyone tell me why enclosing checkboxes inside their <label> tag might be a good idea

It might be a good idea because you could lose the id and for attributes in this case, making the markup simpler. When an <input> is inside a <label>, the connection between them is implicit. (See HTML4 section 17.9.1.)

However, in practice this doesn't work in IE, so you lose that potential advantage.

I can only assume in this case it's for layout/styling reasons.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • Thanks for answering. Justin's answer was just a little bit better. But +1 anyway. – kikito Apr 27 '10 at 18:24
  • From version IE 7, IE supports the implicit association, created by placing an input element inside a label element. Of course, the id method is still somewhat more reliable. – Jukka K. Korpela Dec 16 '11 at 17:19
  • It does work in IE. 7+ actually. It doesn't work with tabled layouts. – Madara's Ghost Dec 16 '11 at 21:16
  • This answer is referenced in this related question : http://stackoverflow.com/questions/8537621/possible-to-associate-label-with-checkbox-without-using-for-id/8537641 – abernier Aug 12 '13 at 07:43
4

In addition to the reasons mentioned in the other answers, if the <label> and <input> are separate any whitespace between them will be non-clickable. This probably isn't what you wanted. For example, the newline in this code will result in a non-clickable gap:

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

Nesting the <input> inside the <label> avoids this, because the whitespace is part of the label.

Live example: http://jsfiddle.net/xKLrS/2/

Mark Ivey
  • 176
  • 1
  • 11