可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

This question already has an answer here:

Should I put input elements inside a label element? 12 answers

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

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="check" id="id_2" value="2" type="checkbox">Two
</label>
<br />
<label class="control" for="id_3">3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input name="check" id="id_3" value="3" type="checkbox">Three
</form>
</body>
</html>