我们应该把<input>里面<标签>? [英] Should we put <input> inside <label>?

问题描述

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

关于 http://www.alistapart.com/articles/prettyaccessibleforms/ 为什么他们在第一个 fieldset 中使用 2 种方法，在 label 之后保留 input，在第二个 fieldset 中保留 label 之后的 >input.为什么?

<legend>交货详情</legend><ol><li><label for="name">Name<em>*</em></label><input id="name"/><li><label for="address1">地址<em>*</em></label><输入id=地址1"/><li><label for="address2">地址 2</label><input id="address2"/><li><label for="town-city">城镇/城市</label><input id="town-city"/><li><label for="county">County<em>*</em></label><输入id=县"/><li><label for="postcode">Postcode<em>*</em></label><输入id=邮政编码"/><li><字段集><图例>这个地址也是您的发票吗?地址?<em>*</em></legend><label><input type="radio" »名称="发票地址"/>是</label><label><input type="radio" »名称="发票地址"/>没有</label></fieldset></ol></fieldset>

为什么他们有时在 label 之后保留 input 有时在里面?

更新:

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

解决方案

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

 <标签>名称:<input type="textbox" name="firstName"/>

至于为什么" - 在

中，单选按钮被放置在标签中，因此标签与其单选按钮之间不会出现不可点击的间隙.>

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.

这篇关于我们应该把<input>里面<标签>?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！