Question

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

http://www.alistapart.com/articles/prettyaccessibleforms/为什么他们在第一个fieldset中使用2方法，他们在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之后保留input而在某个时间内？

更新

此处http://www.usability.com.au/resources/forms.cfm他们也在label不在

之后保持{{1}}

Answer 1

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

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

至于“为什么” - 在<fieldset>中，单选按钮被放入标签中，因此标签与其单选按钮之间不会有无法忽略的间隙。

Answer 2

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

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

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

Answer 4

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

好的，再一次：现在控制界面以灰色显示（如果未禁用CSS）。如果您希望控件对控件两侧的点击敏感，请在标签之间加上<input>标记<label...>，如果足以使控件的一侧对点击敏感，请在<label>之前或之后放置<input>标记。在下面的示例中：前两个控件对控件的两侧（包括左侧的空白）的点击敏感，第三个 - 仅对于左侧。

检查此示例：

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

我们应该将<input />放在<label>吗？</label>中

4 个答案: