11

我总是尝试做以下事情：

<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 （上面）更正确，但根据此处的文档，两者都是正确的

4

8 回答 8

13

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

于 2008-12-30T02:11:00.363 回答
6

我同意标签通常是未知标签。我用它的形式 

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

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

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

于 2008-12-30T02:17:56.540 回答
5

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

于 2008-12-30T05:38:21.160 回答
4

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

于 2008-12-30T02:23:56.013 回答
3

在该网站上工作的开发人员不知道该<label>标签的存在。

于 2008-12-30T02:11:39.830 回答
2

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

  1. 试一试。
  2. 在浏览器中加载它，看看有什么问题。
  3. 谷歌搜索修复。
  4. 重复。

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

于 2008-12-30T02:18:20.910 回答
2

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

于 2008-12-30T05:19:23.383 回答
1

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

于 2008-12-30T04:02:44.863 回答