Question

玛丽有一个小小的形状，它的字段就是这样标记的每当一个错误悄悄进入时，它就会产生混乱。

我为每个输入字段都有一个标签......相当标准的事情。在验证表单后，我在表单顶部显示一个有用的小段落，详细说明哪些信息丢失或不正确。

我可以为同一个输入字段设置两个标签吗？一个是正确的形式，还有一个在验证提醒文本中？我有什么理由不这样做吗？

Answer 1

我认为这个问题与HTML表单有关。来自specification：

LABEL元素可用于将信息附加到控件。每个LABEL元素只与一个表单控件相关联。

因此，每个表单控件都可以由多个标签引用，但每个标签只能引用一个控件。因此，如果有一个控件的第二个标签是有意义的（在你描述的情况下，确实如此）可以随意添加第二个标签。

Answer 2

HTML是合法的，并且有效（点击任何标签都会将焦点转移到相关字段）。

出于可访问性原因，这样做有点棘手。

这不是一种“常见”方法，因此至少有一个常见的屏幕阅读器（我用NVDA测试过）只有在将焦点移到字段时才会读取第一个标签 - 它会忽略同一字段的任何其他标签

因此，如果您的错误消息位于页面顶部，盲目或低视力用户在字段中进行选项卡只会在登陆相关字段时听到错误消息，而不是旁边的“真实”标签

因此 - 如果你正确地说出错误信息，这可能是一件好事（当然比仅用红色突出显示非验证字段更好！）。

Answer 3

是的，您可以在同一个表单控件中指向多个标签。这是perfectly legal：

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

这只是一个例子......通常你会用一个标签包裹这些行，因为它们很接近。

Answer 4

虽然合法，但它不是将多个标签与单个<input>元素相关联的最佳方式。相反，您应该使用aria-labelledby属性。

您首先为id元素提供唯一的<label>属性。然后，您在aria-labelledby元素上放置<input>属性，将其值设置为id元素中的<label>值，以空格分隔。

以下是MDN网络文档中"Using the aria-labelledby attribute"页面的示例：

<div id="billing">Billing</div>

<div>
    <div id="name">Name</div>
    <input type="text" aria-labelledby="billing name"/>
</div>
<div>
    <div id="address">Address</div>
    <input type="text" aria-labelledby="billing address"/>
</div>

输入字段可以有两个标签吗？

4 个答案: