css - 我们应该把 &lt;input&gt; 放在 <label> 里面吗?

标签 css xhtml accessibility screen-readers

<分区>

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

关于 http://www.alistapart.com/articles/prettyaccessibleforms/为什么他们在第一个 fieldset 中使用 2 个方法,他们在 label 之后保留 input,在第二个 fieldset 中他们保留在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他们还在 label 之后保持 input 不在里面

最佳答案

这是 according to the specs , 并适用于所有现代浏览器(但不适用于 IE6 - 单击标签不会将焦点设置到输入控件,除非您包含 idfor ):

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

至于“为什么”——在<fieldset> ,单选按钮放在标签中,因此标签和单选按钮之间不会有不可点击的间隙。

关于css - 我们应该把 &lt;input&gt; 放在 <label> 里面吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2895328/

相关文章:

javascript - 如何用 PHP 一条一条地检索用户帖子

ios - UiCollectionView 辅助功能焦点

javascript - preventDefault()、滚动和可访问性

html - 将没有固定宽度或高度的 div 中的内容居中

css - 使用 CSS & SASS 选择唯一类的 child

html - 一些 CSS 对如何使用 margin : 0 auto; in a template 居中元素的疑问

html - 为什么IE11会给出这个警告: HTML1406: Invalid tag start: "<?"

ios-simulator - 如何关闭 iOS 9 模拟器中的辅助功能检查器?

css - 如何使CSS样式不继承给后代?

html - 如何在其父元素旁边制作子菜单?