DEMO

Answer 1

只要您将input和label与for/id属性关联起来，即使input正好在标签中“，两者都非常正确，有效且可访问（看到@AramKocharyan关联的问题的最佳答案以及我在那里的评论）

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

您经常会找到左侧为label的表单，中心位于input，右侧有一些帮助：

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

如果input元素外部有label，则提示将使用span进行编码。屏幕阅读器不会听到它，因为它不是label或提交按钮的一部分。

在input元素中使用label，您可以将标签和提示放入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;
    }

这样，错误就会被读取给屏幕阅读器（在本文的帮助下，他们看不到或者几乎看不到的颜色不是向他们传达信息的唯一方式。）

Answer 2

要么是正确的。

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

下面是imho：无论如何，我不会把标签放在标签内，因为它对我来说似乎有点奇怪。标签用于标记输入字段，保存描述，而不是包含它们。

标签内的复选框？

DEMO

2 个答案: