Browse DevX
Sign up for e-mail newsletters from DevX

Tip of the Day
Language: Web
Expertise: All
Jul 12, 2000



Building the Right Environment to Support AI, Machine Learning and Deep Learning

Improving Usability with the LABEL Tag

When it comes to usability, the devil is in the details. Annoying little quirks can make your users hate to use your perfectly good web app. One easy (but often overlooked) way to improve usability is to use the LABEL tag with intrinsic HTML controls:

<INPUT TYPE=checkbox NAME=rbTest ID=rbTest 
<LABEL FOR=rbTest>Check Me!</LABEL>

Of course, when the user clicks the checkbox, it checks and removes checks. However, when a LABEL is present, the user can click the control or its label to check and uncheck the checkbox—just like they can in a Windows application. That's much easier and more intuitive than trying to aim for the little box or radio button, especially when using the imprecise pointing devices on most laptops.

To use a LABEL, simply point its FOR attribute to the ID of the control it refers to. Since you probably won't define an on-click handler for the LABEL, the click event will bubble to that control.

LABEL is a standard HTML 4 tag. It is currently supported by Internet Explorer but not by Navigator.

Chris McCann
Thanks for your registration, follow us on our social networks to keep up-to-date