使复选框和单选标签可点击

Posted 2023-03-05

【中文标题】使复选框和单选标签可点击

【英文标题】：Making checkbox and radio labels clickable

【发布时间】：2011-01-16 11:43:18

【问题描述】：

大量（我敢说最多吗？）网站不会为其复选框和单选输入设置可点击标签。这似乎是一个巨大的可用性增益，只需很少的努力。使用<label> 是否存在任何兼容性/功能/可用性问题会阻止开发人员使用此标签？

即使 Stack Overflow 似乎也对此感到内疚，例如，在提出问题时，每天通知任何新答案复选框标签不可点击。

【问题讨论】：

如果我没记错的话，<label> 是在 html 4 中引入的，早在 HTML 表单出现之后。所以它没有被使用主要是因为 传统（从视图源学习）不包括它，并且它不是正确的视觉外观和普通功能（可点击的复选框）所必需的。

我已经知道它有一段时间了，但从现在开始我会更多地使用它。

【参考方案1】：

除了懒惰没有其他原因。 <label>s 对于可访问性至关重要，对于我们这些鼠标点击瞄准不佳的人来说也非常方便:)

【讨论】：

哎呀 - 虽然个人资料首选项页面上的复选框确实有标签

是的，整个网站都不一致。

【参考方案2】：

<label> 是一个纯 HTML 标签，不需要 javascript。我想所有（主要）浏览器都支持这个标签，因为它很容易实现。

很多开发者没有使用它，因为：

需要更多的努力（到处添加所有标签） 他们不知道它的存在 他们觉得不方便？！

但是没有理由不使用标签。除非您的带宽非常受限，否则可能吗？

【讨论】：

我认为带宽评论只适用于少数最受欢迎的网站，例如谷歌。

我完全同意，但这是我能想到的唯一原因，为什么不使用<label> 标签。

@alex：是的，谷歌不使用<label> 标签，我只是进入我的帐户设置并检查。我觉得这很奇怪。

@OrbMan Google 使用<font> 标签，这是设计使然（根据 Matt Cutt 的博客）。作为 Google，他们需要节省宝贵的字节数。

【参考方案3】：

不，这没有问题，但不幸的是，这是most ignored html tags 中的一个。同意，出于可访问性的原因，此标签非常重要，更重要的是，对于移动设备等小型设备的布局，您离不开它。

【讨论】：

移动重要性+1。和很好的链接，谢谢。如果你去他们的注册页面，你会注意到他们没有使用<label> 标签。 :)

@OrbMan：这就是为什么我为您提出的好问题提出 +1 并猜测即使我已经回答了它，但我自己从不关心它。 :)

就像正确的 Tab 键顺序（甚至完全是 Tab 键）一样，热键和使用键盘执行操作的一般能力正在缓慢但肯定会从软件中消失......

【参考方案4】：

我能想到的唯一困难是你的表单控件需要有一个 ID 属性，并且 ID 属性需要在你的页面中是唯一的。

如果您以编程方式生成表单字段，则必须在它们出现的每个页面中为它们中的每一个生成一个唯一 ID。这可能是个问题。

但总的来说，是的，我认为只是程序员的头脑中没有它。

在 ASP.NET WebForms（或其他任何名称）中，您需要 <asp:Label> 元素上的 AssociatedControlID 属性。

【讨论】：

表单控件不需要ID：这是一个标签

我想我见过没有id属性的浏览器不会实现click-label-to-select-form-field。有时，出于布局原因，您不希望您的表单字段位于 <label> 标记中。 （虽然不经常。）

【参考方案5】：

这里有一个demonstration，供那些想知道如何做的人使用。

有一种方法可以将表单元素附近的文本与元素本身连接起来，因此可以单击任何一个来激活控件：

你想喝点什么？

<label for="ice1"><input type="checkbox" name="withice" id="ice1">ice</label> 
<label for="ice2"><input type="checkbox" name="withlid" id="ice2">plastic lid</label>
<label for="ice3"><input type="checkbox" name="withstraw" id="ice3">straw</label>

【讨论】：

如果将输入标签包裹在标签中，则根本不需要for和id