Should I put input tag inside label tag?

Question

I was just wondering if there is a best practice concerning label and input tag :

classic way:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

or

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

Answer 1

From w3: The label itself may be positioned before or after or around the associated control.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

or

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

or

<label>
   <INPUT type="text" name="lastname">
   Last Name
</label>

Note that the third technique cannot be used when a table is being used for layout, with the label in one cell and its associated form field in another cell.

Either one is valid. I like to use either the first or second example, as it gives you more style control.

Answer 2

The content of the label element is supposed to be the text of the label. The input control goes outside of it.

Answer 3

If you include the input tag in the label tag, you don't need to use the 'for' attribute.

That said, I don't like to include the input tag in my labels because I think they're separate, not containing, entities.

Answer 4

As I recall, both are correct, but putting the input inside the label makes it much less flexible when styling with CSS.

Answer 5

Personally I like to keep the label outside, like in your second example. That's why the FOR attribute is there. The reason being I'll often apply styles to the label, like a width, to get the form to look nice (shorthand below):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

Makes it so I can avoid tables and all that junk in my forms.

Answer 6

Wow! I can't believe I've never heard of this tag. Apparently it makes it easy to get focus if you click on the label name.

Here is a visualization of it, in case anyone else out there never heard of it like me:

http://tinyblurb.appspot.com/get?hash=bf01d7f698117fee18f885cf81daecba

Answer 7

facebook uses the third technique as this helps keep the same look and feel in all browsers, like when you do a nice submit on its own you know IE will screw it up lol :D

Answer 8

See http://www.w3.org/TR/html401/interact/forms.html#h-17.9 for the W3 recommendations.

They say it can be done either way. They describe the two methods as explicit (using "for" with the element's id) and implicit (embedding the element in the label):

Explicit:
"The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element."

Implicit:
"To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element."