HTML - Correct way of coding a checkbox with a Label

Question

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

Answer 1

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.