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

Question

我总是尝试执行以下操作：

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

或

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

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

大多数网站（我会说＆gt; 40％）不使用<label>标记。

这有什么理由吗？浏览器或其他问题是否存在问题？

注意：如果人们不了解<label>标签，它有许多优点：

• 复选框＆amp; radios：你可以点击文本和复选框来勾选复选框（以及我相信的焦点）：Blah blah blah
• 其他输入：如果单击文本，它将聚焦输入（文本区域，文本，文件）（此功能不如复选框和无线电那样有用）

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

Answer 1

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

Answer 2

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

的形式使用它

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

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

我会尝试你的解决方案，但

Answer 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。

Answer 4

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

Answer 5

网站上的开发人员不知道存在<label>标记。

Answer 6

大多数网站都是由那些只做他们认为应该让网站工作所需的人做出来的。流程是：

1. 捅一下。
2. 将其加载到浏览器中，看看有什么问题。
3. 在谷歌搜索修复程序。
4. 重复。

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

Answer 7

优势显而易见但我不认为大多数人都知道它，因为标签似乎没有传达任何具体的东西。您显然可以看到使用强标记的优势，因为它使文本看起来很粗但标签标签？你不会注意到任何不同的东西。

Answer 8

因为它是一个低调的标签，应该得到更多的关注。当你在这里（改善可访问性）时，不要忘记tabindex属性。