html - 标签内的复选框？

Question

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

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

它们在 Chrome 中都可以正常工作，一个比另一个更跨浏览器吗？有区别吗？

DEMO

Answer 1

只要您将 input 和 label 与 for/id 属性相关联，两者都是完全正确、有效且可访问的，即使 code>input 就在标签中(请参阅@AramKocharyan 链接的问题的最佳答案和我在那里的评论)

当用户关注表单元素(输入、选择或文本区域)时，屏幕阅读器将阅读相关的标签内容。在表单中，他们很可能只会阅读标签、图例和按钮(我的意思是重置、提交、图像或按钮)，因为 JAWS 等具有特殊模式；大致目的是填写表格，而不是像阅读网页的其余部分那样阅读内容。

你经常会发现表单的左边是 label，中间是 input，右边是一些帮助:

        E-mail [                 ] ex: johndoe@domain.com

• 如果 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: johndoe@domain.com</span>
  </label>
  

这样，提示将与真实标签一起读给 AT 用户。
注意:当然，你会为 strong 和 span 设置不同的样式，比如 resp。粗体右对齐，斜体左对齐。 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: johndoe@domain.com</span>
        </label>
    </p>

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

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

    .error span {
      color: red;
    }

这样，错误就会被屏幕阅读器读出(他们看不到或几乎看不到的颜色并不是借助此文本向他们传达信息的唯一方式)。