Improving Usability with the LABEL Tag

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:


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.


Share the Post: