Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making checkbox and radio labels clickable

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?

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

like image 227
D'Arcy Rittich Avatar asked Feb 13 '10 13:02

D'Arcy Rittich


People also ask

How do I make a clickable radio button?

To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.


2 Answers

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

like image 139
Ray Avatar answered Oct 14 '22 10:10

Ray


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.

like image 30
Sarfraz Avatar answered Oct 14 '22 10:10

Sarfraz