使复选框和广播标签可点击

时间:2023-01-17 13:43:49

A large number of (dare I say most?) sites do not make the labels clickable for their checkbox and radio inputs. It seems to be a huge usability gain for very little effort. Are there any compatibility/functionality/usability issues with using <label> that would discourage developers from using this tag?

大量(我敢说最多?)网站不会使标签可以点击其复选框和无线电输入。只需很少的努力就可以获得巨大的可用性。使用

Edit: Even * seems guilty of this, e.g., when asking a question, the Notify daily of any new answers checkbox label is not clickable.

编辑:即使*似乎也对此感到内疚,例如,在提问时,每天通知任何新答案复选框标签都不可点击。

5 个解决方案

#1


30  

No reason other than laziness. <label>s are essential for accessibility, and are also pretty handy for those of us who have poor aim with our mouse clicks :)

除了懒惰之外没有理由。

#2


7  

No, there are no issues with that, but unfortunately this is one of the most ignored html tags. Agreed, this tag is extremely important for accessibility reasons and what is more when it comes to layouts for small devices such as mobiles, you can't live without this.

不,这没有问题,但不幸的是,这是最被忽视的html标签之一。同意,这个标签对于可访问性的原因非常重要,而且对于诸如手机之类的小型设备的布局更是如此,如果没有这一点,你就无法生存。

#3


3  

The only difficulty I can think of is that your form controls need to have an ID attribute, and ID attributes need to be unique within your page.

我能想到的唯一困难是您的表单控件需要具有ID属性,并且ID属性在您的页面中必须是唯一的。

If you were generating form fields programmatically, you would have to generate a unique ID for each of them within each page they appeared on. This could conceivably be an issue.

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

But generally, yeah, I think it’s just that programmers don’t have it in their heads.

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

In ASP.NET WebForms (or whatever it’d called), you want the AssociatedControlID attribute on the <asp:Label> element.

在ASP.NET WebForms(或其他任何名称)中,您需要 元素上的AssociatedControlID属性。 :label>

#4


3  

And here's a demonstration for those looking how to do it.

这里有一个示范,为那些看起来如何做的人。

There is a way to connect the text near a form element with the element itself, so either one can be clicked to activate the control:

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

what would you like with your drink?

你想喝点什么?

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

#5


1  

<label> is a pure HTML tag, no JavaScript is required. I suppose that all (major) browser support this tag, since it is very easy to implement.

A lot of developers are not using it because:

很多开发人员都没有使用它,因为:

  • it requires more effort (adding all the tags everywhere)
  • 它需要更多的努力(到处添加所有标签)
  • they do not know about it existence
  • 他们不知道它的存在
  • they do not think it is convenient?!
  • 他们认为这不方便吗?!

But there is no reason not to use the tag. Unless you are very limited with your bandwidth, maybe?

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

#1


30  

No reason other than laziness. <label>s are essential for accessibility, and are also pretty handy for those of us who have poor aim with our mouse clicks :)

除了懒惰之外没有理由。

#2


7  

No, there are no issues with that, but unfortunately this is one of the most ignored html tags. Agreed, this tag is extremely important for accessibility reasons and what is more when it comes to layouts for small devices such as mobiles, you can't live without this.

不,这没有问题,但不幸的是,这是最被忽视的html标签之一。同意,这个标签对于可访问性的原因非常重要,而且对于诸如手机之类的小型设备的布局更是如此,如果没有这一点,你就无法生存。

#3


3  

The only difficulty I can think of is that your form controls need to have an ID attribute, and ID attributes need to be unique within your page.

我能想到的唯一困难是您的表单控件需要具有ID属性,并且ID属性在您的页面中必须是唯一的。

If you were generating form fields programmatically, you would have to generate a unique ID for each of them within each page they appeared on. This could conceivably be an issue.

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

But generally, yeah, I think it’s just that programmers don’t have it in their heads.

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

In ASP.NET WebForms (or whatever it’d called), you want the AssociatedControlID attribute on the <asp:Label> element.

在ASP.NET WebForms(或其他任何名称)中,您需要 元素上的AssociatedControlID属性。 :label>

#4


3  

And here's a demonstration for those looking how to do it.

这里有一个示范,为那些看起来如何做的人。

There is a way to connect the text near a form element with the element itself, so either one can be clicked to activate the control:

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

what would you like with your drink?

你想喝点什么?

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

#5


1  

<label> is a pure HTML tag, no JavaScript is required. I suppose that all (major) browser support this tag, since it is very easy to implement.

A lot of developers are not using it because:

很多开发人员都没有使用它,因为:

  • it requires more effort (adding all the tags everywhere)
  • 它需要更多的努力(到处添加所有标签)
  • they do not know about it existence
  • 他们不知道它的存在
  • they do not think it is convenient?!
  • 他们认为这不方便吗?!

But there is no reason not to use the tag. Unless you are very limited with your bandwidth, maybe?

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