我们应该把 <input> 放在 <label> 里面吗？ [复制]答案

【问题标题】：Should we put <input> inside <label>? [duplicate]我们应该把 <input> 放在 <label> 里面吗？ [复制]
【发布时间】：2011-02-23 03:09:41
【问题描述】：

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

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

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

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

更新：

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

【问题讨论】：

您添加的链接告诉您不使用隐式标签的原因：“直到用户代理支持标签和表单控件之间的显式关联，对于所有具有隐式关联标签的表单控件，请确保标签正确定位。” Web Content Accessibility Guideline Checkpoint 10.2" 一些残障人士仍然坚持使用他们的旧屏幕阅读器，因此您最好使用明确的标签。
@Jørn Schou-Rode - 哦，是的，同样的问题

标签： css xhtml accessibility screen-readers

【解决方案1】：

这是according to the specs，适用于所有现代浏览器（但不适用于 IE6 - 单击标签不会将焦点设置到输入控件，除非您包含 id 和 for）：

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

至于“为什么” - 在<fieldset> 中，单选按钮被放置在标签中，因此标签与其单选按钮之间不会有不可点击的间隙。

【讨论】：

"（不，不在 IE6 中）："什么意思？
好久没用过，但我记得IE6里有这个功能
典型的 IE6，反之亦然。如果您在标签中添加for，这将破坏子检查功能

【解决方案2】：

将输入放在标签内将两者关联起来。这对于可访问性很重要（例如，对于无法通过查看页面来查看标签和输入之间关系的人的屏幕阅读器）。另一种方法是在标签标签中使用for 属性。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

通常这样做是为了扩展输入控制界面。当有单选按钮或复选框时，<label for="given_control"></label> 内的所有内容都会进行控制。

好的，再来一次：现在控制表面显示为灰色（如果您的 CSS 未禁用）。如果您希望控件对控件两侧的点击敏感，请将 <input> 括在标签标签之间 @ 987654324@，如果它足以让控件的一侧对点击敏感，请将<label>标签放在<input>之前或之后。在以下示例中：前 2 个控件对控件两侧（包括左侧的空格）的点击敏感，第三个控件对左侧的点击敏感。

检查这个例子：

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

【讨论】：

@arunas_t - 您给定的代码不是 W3C 有效的。
信不信由你，为了简单起见，我删除了所有内容，但它仍然适用于 IE、Firefox 和 Opera，并且是用于视觉示例。如果您想查看您的问题的答案，请尝试一下，干杯。附言如果您需要完整的兼容代码，我可以提供。
代码已更新。现在怎么样了？至少 Firefox 向我展示了三个绿色？ :)
@arunas_t - 所有 3 个输入的行为在 FF jsbin.com/ebaqo 中是相同的
好吧，也许我被高估了我的教学能力。我刚刚在您提供的链接中检查了 FF 3.6 中的代码，它的行为肯定有所不同。我有一个想法 - 我将使用 css 更改代码，以便您可以看到控制表面，并将控制类型更改为复选框 - 当单击同一控制表面时它会交替，也许它会更有意义。控制表面将是灰色的。如果不是，对不起，也许其他人能够解释你。不管怎样，谢谢你教我耐心。