Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


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

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 
VALUE=1>
<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
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap