我们应该把<input>放在<label>里吗？

Question

我在同一个表单示例中看到了2种不同的方法

在http://www.alistapart.com/articles/prettyaccessibleforms/为什么他们正在使用2方法首先fieldset他们保持input后label,并在第二fieldset他们保持input后label.为什么？

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

为什么他们有时会保持input在label内部？

更新:

这里http://www.usability.com.au/resources/forms.cfm他们也在不在里面input后保留label

Answer 1

这是根据规范,并适用于所有现代浏览器(但不是在IE6中 - 单击标签将不会将焦点设置为输入控件,除非您包含id和for):

  <label>
      Name: <input type="textbox" name="firstName" />
  </label>

至于"为什么" - 在这里<fieldset>,单选按钮放在标签中,这样标签和它的单选按钮之间就不会有一个不可忽略的间隙.

Answer 2

将输入放在标签内会将两者联系起来.这对于可访问性非常重要(例如,通过查看页面无法看到标签和输入之间关系的人的屏幕阅读器).另一种方法是for在label标签中使用该属性.

Answer 3

今天我在这里找到了答案。http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html

HTML 和 XHTML 规范允许隐式和显式标签。但是，某些辅助技术无法正确处理隐式标签（例如，名字）。例如<label>First name <input type="text" name="firstname"></label>）。

所以明确是要走的路，它也给了我们更多的风格选择。