This question already has an answer here:
I saw 2 different method on same form example:
on http://www.alistapart.com/articles/prettyaccessibleforms/ why they are using 2 method in first fieldset they are keeping input after labeland in 2nd fieldset they are keeping input after label. Why?
<fieldset>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
<li>
<label for="address1">Address<em>*</em></label>
<input id="address1" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" />
</li>
<li>
<label for="town-city">Town/City</label>
<input id="town-city" />
</li>
<li>
<label for="county">County<em>*</em></label>
<input id="county" />
</li>
<li>
<label for="postcode">Postcode<em>*</em></label>
<input id="postcode" />
</li>
<li>
<fieldset>
<legend>Is this address also your invoice »
address?<em>*</em></legend>
<label><input type="radio" »
name="invoice-address" /> Yes</label>
<label><input type="radio" »
name="invoice-address" /> No</label>
</fieldset>
</li>
</ol>
</fieldset>
why they are sometime keeping input after label and sometime inside?
Update:
here http://www.usability.com.au/resources/forms.cfm they are also keeping input after label not inside
This is according to the specs, and works in all modern browsers (but not in IE6 - clicking the label will not set focus to the input control, unless you include an id and for):
<label>
Name: <input type="textbox" name="firstName" />
</label>
As for "why" - In the <fieldset>, the radio buttons were put in the labels so there won't be an unclickable gap between the label and its radio button.
Putting the input inside the label associates the two. This is important for accessibility (e.g. screen readers for people who can't see the relationship between the label and the input by looking at the page). An alternative is to use the for attribute in the label tag.
Today I found answer here. http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html
The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, First name ). For example
<label>First name <input type="text" name="firstname"></label>).
So explicit is the way to go and it's also give us more style option.
Generally it's done for the purpose of extension of the input control surface. When there is a radio button or a checkbox, everything that is inside <label for="given_control"></label> engages control.
Ok, one more time: Now control surfaces are seen in grey (If Your CSS is not disabled).If You want control to be sensitive to the clicks on the both sides of control, enclose <input> between label tags <label...>, if its enough for one side of the control to be sensitive to the click, put <label> tags either before or after <input>. On the following example: First 2 controls are sensitive to the clicks on the both sides (including whitespace on the left) of the control, the third one - just for the left side.
Check this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Visual Label example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
.control
{
background-color:#ddd
}
</style>
</head>
<body>
<form action="" method="post" name="f1">
<label class="control" for="id_1">1.
<input checked="checked" name="check" id="id_1" value="1" type="checkbox">One
</label>
<br />
<label class="control" for="id_2">2.
<input name="check" id="id_2" value="2" type="checkbox">Two
</label>
<br />
<label class="control" for="id_3">3. </label>
<input name="check" id="id_3" value="3" type="checkbox">Three
</form>
</body>
</html>
来源：https://stackoverflow.com/questions/2895328/should-we-put-input-inside-label