16

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

在http://www.alistapart.com/articles/prettyaccessibleforms/为什么他们首先使用 2 种方法，他们在第 2种fieldset方法中保持input之后。为什么？labelfieldsetinputlabel

<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他们也在不在里面inputlabel

4

4 回答 4

15

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

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

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

于 2010-05-24T07:14:42.693 回答
6

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

于 2010-05-24T07:22:56.353 回答
6

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

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

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

于 2010-05-30T02:39:41.023 回答
0

通常这样做是为了扩展输入控制界面。当有一个单选按钮或一个复选框时，里面的一切都<label for="given_control"></label>参与控制。

好的，再来一次：现在控制表面显示为灰色（如果您的 CSS 未被禁用）。如果您希望控件对控件两侧的点击敏感，请<input>在标签标签之间括起来<label...>，如果它足以容纳一侧控件对点击敏感，将<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>
于 2010-05-24T08:07:32.190 回答