<label> 复选框：是否有更多网站不使用它的原因？答案

【问题标题】：<label> on checkboxes: is there a reason why more websites don't use it?<label> 复选框：是否有更多网站不使用它的原因？
【发布时间】：2008-12-30 02:06:50
【问题描述】：

我总是尝试做以下事情：

<label><input type="checkbox" /> Some text</label>

或

<label for="idOfField"><input type="checkbox" id="idOfField" /> Some text</label>

我的问题与标签标签有关，特别是在复选框上。

大多数网站（我会说 >40%）不使用 <label> 标签。

这是有原因的吗？是浏览器有问题还是其他问题？

注意：如果人们不知道<label> 标签，它有很多优点：

复选框和收音机：您可以单击文本以及复选框以选中复选框（以及我相信的焦点）：Blah blah blah
其他输入：如果您单击文本，它将聚焦输入（文本区域、文本、文件）（此功能不如复选框和单选有用）

注意 2： 有人提到示例 #2 比 #1（上）更正确，但根据文档 here，两者都是正确的

【问题讨论】：

这是为了可访问性，Eneki 的答案（带有 for 属性）是更正确的形式。

标签： html usability label

【解决方案1】：

我认为这可能更多是人们不了解标签的一个因素。我没有，直到这篇文章。

【讨论】：

很遗憾这个标签不受欢迎。我什至看到损坏的 javascript 试图模仿它的行为：/
我宣传标签的优点。

【解决方案2】：

我同意标签通常是未知标签。我以

的形式使用它

<label for="chk1">Some text</label><input id="chk1" type="checkbox"/>

for 属性让用户点击标签也可以选择具有相应 id（不是名称）的复选框，而不是被 annidate 我可以更好地使用 CSS 控制布局。

不过，我会尝试你的解决方案

【讨论】：

就我所经历的和在文档中，您可以使用任何一种方式。如果字段在内，则不需要 for 属性

【解决方案3】：

据我所知，使用<label> 没有任何缺点。在过去的几年里，我经常使用它。

实际上有 3 种方法可以设置标签，前两种与您在问题中给出的对应：

<label for="xa">XA: <input type="text" id="xa" /></label><br />
<label for="xb">XB:</label> <input type="text" id="xb" /><br />
<label>XC: <input type="text" id="xc" /></label>

上述所有 3 项都适用于 FF3 和 IE7。我记得由于某种原因，我在心里将最后两个标记为“要避免，只是部分有效”。因此，我敢打赌，只有第一个在 IE6 中有效。

澄清一下：“最好”的方法是我的示例 #1，您的示例 #2。

【讨论】：

所有这些示例都在 IE6 中工作。我想说，最后两个工作 100%，第一个尝试明确两次，比如 200% ;)

【解决方案4】：

一些较旧的浏览器不解释 for 属性，而是要求将表单元素嵌套在 label 标记内。

【讨论】：

您愿意用链接备份吗？（我想了解更多）
哪些？我只知道IE坏了，相反。它只支持for。

【解决方案5】：

网站上的开发者不知道<label>标签的存在。

【讨论】：

什么意思？我看到的唯一复选框是上面有标签的“社区维基”？
@Darryl，不确定你在说什么。我的意思是“开发者”和“站点”。不是这样。我看不出“社区 wiki”与任何事情有什么关系。
@BQ，我很抱歉，我以为你的意思是这样。

【解决方案6】：

大多数网站都是由那些只做让网站按他们认为应该的那样工作的人制作的。流程为：

试一试。
在浏览器中加载它，看看有什么问题。
在 google 上搜索修复。
重复。

由于这些人中的大多数人从不尝试在不使用鼠标的情况下集中任何输入，因此问题永远不会变得明显。

【讨论】：

【解决方案7】：

优点是显而易见的，但我认为大多数人并不了解它，因为标签似乎没有传达任何具体内容。您显然可以看到使用强标签的优势，因为它使文本看起来很粗，但标签标签？你不会注意到有什么不同。

【讨论】：

【解决方案8】：

因为它是一个低调的标签，应该得到更多的关注。当您使用它时（提高可访问性），不要忘记 tabindex 属性。

【讨论】：