4

考虑以下标记：

<label>
  <input type="hidden" name="likes_bacon" value="no" />
  <input type="checkbox" name="likes_bacon" value="yes" />
  I like bacon
</label>

W3C HTML 验证器将针对此标记引发错误，因为标签包含多个输入，这在技术上是无效的。

我的问题有两个：为什么验证者应该关心，因为第一个是hidden？用户代理（包括屏幕阅读器 - 我已经检查过）没有表明隐藏字段存在，并且框架呈现带有相同名称的随附隐藏输入的复选框是很常见/有用的，以便始终通过在未选中复选框的情况下提交表单的情况下，表单提交中的默认值。隐藏的输入也是不可变的，因为它不是真正的用户可编辑的表单控件。

其次，除了浏览器控制台中出现错误和验证失败的可能性之外，这样做有什么害处吗？除了“你不应该”之外，我想不出任何一个理由！

我想这会导致一个更广泛的观点，这可能input type="hidden"是用词不当，因为它根本不是真正的输入！

我很清楚，完全可以将输入移到外部并使用属性label引用复选框。idfor

松散相关：一个标签内的两个输入字段

4

2 回答 2

2

为什么 W3C 验证器说这无效？因为无效！干净利落。HTML 规范本身说：

label元素最多可以包含一个后代input元素、元素button、select元素或textarea元素。

由于规范说它是无效的，验证器会说它是无效的。

现在，规范为什么这么说的原因是因为单击标签会聚焦与其关联的交互元素。当一个元素有焦点时，它可以接收键盘输入。

根据不言而喻的用户界面标准，您一次只能输入一个文本框。由于只能输入一个文本框，因此任何时候只有一个表单控件需要接收键盘输入。因此，任何时候都只有一个具有焦点的交互式 HTML 元素。

使用标签一次聚焦两个元素是没有意义的，因为只能有一个接收键盘输入。

顺便说一句，在标签内放置隐藏的输入也是没有意义的。由于隐藏的输入不是由用户操作的，因此给他们键盘输入是没有意义的。

于 2013-09-03T17:09:24.390 回答
1

基本上，这引发验证错误的原因是因为一个label元素只能与一个 input元素（任何类型）相关联。因此，只有一个“表单控件”可能在一个属性label中，就像我可以在一个for属性中列出的一样。从语义上讲input，类型hidden仍然是“表单控件”，因此可以有一个与之关联的标签。不可见的事实是浏览器强加的默认 CSS 的问题，因此虽然这可能不是一个好的创作实践，但完全有可能拥有

<style scoped>
input[type=hidden] {
    display: inline-block;
    visibility: visible;
}
</style>
<label>
    Hidden input:
    <input type="hidden" value="Peek-a-boo!"/>
</label>

你看，一个 input[type=hidden] 仍然是输入，因此仍然是一个表单控件，因此仍然可以为其分配一个标签（至少根据规范 - 这可能存在浏览器错误）。因为它是一个表单控件，所以它不能与label. 简单如。据我所知，规范中没有任何内容说隐藏类型input不能有标签引用它。

在问题中概述的情况下，用户代理将通过仅将label与 non-hidden关联来纠正错误input，但不太知名的 UA 可能会选择引用可能不是作者的第一个或最后一个“表单控件”意图。

从规范：

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

for 属性将标签与另一个控件显式关联：for 属性的值必须与关联控件元素的 id 属性的值相同。通过 for 属性创建多个引用，可以将多个 LABEL 与同一个控件关联。

在您的特定情况下，您可以简单地将隐藏input的内容移出label：

<input type="hidden" name="likes_bacon" value="no" />
<label>
  <input type="checkbox" name="likes_bacon" value="yes" />
  I like bacon
</label>
于 2013-08-17T11:18:58.777 回答