标签内使用复选框？

Question

我在网上看到人们编写复选框的两种方式，哪一种是正确的？

1. <input id="a" type="checkbox"/><label for="a">复选框</label>
2. <label for="b"><input id="b" type="checkbox">复选框</label>

它们在Chrome浏览器中都可以正常工作，是否有一种比另一种更跨浏览器？它们之间有什么区别吗？

演示

- qwertymk

---

这里有一个非常好的答案：https://dev59.com/GXRA5IYBdhLWcg3w8ikl应该把input标签放在label标签内部。 - Aram Kocharyan

两者都适用于所有主要浏览器，包括IE6和Opera。 - The Alpha

+1 给 @AramKocharyan 的链接，我刚刚在那里添加了一条评论。 - FelipeAls

Answer 1

只要你使用for/id属性将input和label关联起来，即使input嵌套在标签内，两者都是完全正确、有效和可访问的（请参见由@AramKocharyan链接的最佳答案以及我在那里发表的评论）。

当用户在表单元素（input、select或textarea）上聚焦时，屏幕阅读器将读取相关联的标签内容。在表单中，它们通常只会读取标签、说明和按钮（例如重置、提交、图像或按钮），因为JAWS和类似工具有特殊模式；大致的目的是填写表单，而不是像浏览网页内容一样阅读它们。

通常您会在左侧有标签、中间有，右侧还有一些帮助信息的表单。

        E-mail [                 ] ex: [e-mail]

• 如果在label元素之外有一个input，那么提示文本将使用span进行编码。由于它不是label或提交按钮的一部分，所以屏幕阅读器将无法读取。

• 如果在label元素内部有一个input，则可以将标签和提示文本都放入label元素中：

  <label for="email">
      <strong>E-mail</strong>
      <input type="text" id="email" name="whatever"> <!-- HTML4.01 doctype -->
      <span>ex: [e-mail]</span>
  </label>
  

这样，提示将与真实标签一起为AT用户阅读。
注意：当然，您可以对strong和span进行不同的样式设置，例如分别设置粗体右对齐和斜体左对齐。 span用于样式设置（只需为label设置样式并取消strong的一半规则），但这更简单 :)

它在错误和提示方面都很有用：

    <p class="error>
        <label for="email">
            <strong>E-mail</strong>
            <input type="text" id="email" name="whatever" value="aaa"> <!-- HTML4.01 doctype -->
            <span>ERROR: not a valid e-mail address. Example of a valid e-mail: [e-mail]</span>
        </label>
    </p>

    .error strong {
      color: red;
      font-weight: bold;
    }

    .error input {
      border: 1px solid red;
    }

    .error span {
      color: red;
    }

这样，错误信息可以被屏幕阅读器读取（对于无法或几乎无法看到颜色的用户，这种方式并不是向他们传达信息的唯一方式，可以通过这段文本来帮助他们）。

- FelipeAls

---

注意：如果未指定for属性，但label元素具有可标记的元素后代，则树顺序中的第一个这样的后代是label元素的标记控件。 (HTML living standard) - Gqqnbig

Answer 2

两种方式都是正确的。

标签可以包含内联元素（除了其他标签）。输入元素是内联元素。

在我看来，无论如何，我不会将复选框放在标签内，因为这对我来说似乎有点奇怪。标签的作用是标记输入字段，提供描述，而不是包含它们。

- m02ph3u5