Making checkbox and radio labels clickable

不羁岁月 提交于 2019-11-27 15:45:50

问题


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 StackOverflow seems guilty of this, e.g., when asking a question, the Notify daily of any new answers checkbox label is not clickable.


回答1:


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:


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.




回答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.

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.

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.




回答4:


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:


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



来源:https://stackoverflow.com/questions/2257606/making-checkbox-and-radio-labels-clickable

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!