我们应该把< input>里面< label&gt ;? [英] Should we put <input> inside <label>?

问题描述

我在同一个表单示例上看到了两种不同的方法： =nofollow noreferrer> http://www.alistapart.com/articles/prettyaccessibleforms/ 为什么他们在第一个字段集中使用2方法， 之后的输入，并且在 fieldset c $ c>输入后标签。为什么？

 < fieldset> 
< legend>交货详情< / legend> 
< ol> 
< li> 
< label for =name>名称< em> *< / em>< / label> 
< input id =name/> 
< / li> 
< li> 
< label for =address1>地址< em> *< / em>< / label& 
< input id =address1/> 
< / li> 
< li> 
< label for =address2>地址2< / label> 
< input id =address2/> 
< / li> 
< li> 
< label for =town-city>城镇/城市< / label> 
< input id =town-city/> 
< / li> 
< li> 
< label for =county>县< em> *< / em>< / label> 
< input id =county/> 
< / li> 
< li> 
< label for =postcode>邮政编码< em> *< / em>< / label& 
< input id =postcode/> 
< / li> 
< li> 
< fieldset> 
< legend>此地址也是您的发票»
地址？< em> *< / em>< / legend> 
< label>< input type =radio»
 name =invoice-address/>是< / label> 
< label>< input type =radio»
 name =invoice-address/>否< / label> 
< / fieldset> 
< / li> 
< / ol> 
< / fieldset> 
  

为什么他们有时保留输入 code>

更新：

http://www.usability.com.au/resources/forms.cfm 之后输入之后 c>

解决方案

这是根据规范，并在所有现代浏览器（但不是在IE6 - 点击标签不会设置焦点到输入控件，除非你包括 id 和 for ）：

 < label& 
名称：< input type =textboxname =firstName/> 
< / label> 
  

至于为什么 - 在< fieldset> ，单选按钮放在标签中，因此标签和其单选按钮之间不会有不可分割的间隙。

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>里面< label&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！