homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

The LABEL element
Some form controls automatically have labels associated with them.

 8:41 am on Feb 21, 2006 (gmt 0)

Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus). For those controls that have implicit labels, user agents should use the value of the value attribute as the label string. the label element is used to specify labels for controls that do not have implicit labels.


Forms in HTML documents - 17.9.1 The LABEL element [w3.org]

This is an excellent usability feature for visitors to your forms. Using the label element allows the user to click on the text associated with the form control instead of having to click the radio button, check box, select box, etc.

In interface design they call it improved targeting, and it can help reduce the risk of repetitive stress injuries (RSI).
tedster 2004-01-25

Code Example

One label element and one ID per form control.

<input name="action" type="radio" value="title" id="name"> <label for="name">Form control text.</label>

Code Bloat

27 additional bytes (+ ID Name and label Name) to add a noticeable usability function. Very minimal html code required for this feature.

Originally posted in the HTML and Browsers Forum on 2004-01-25 [webmasterworld.com]



 10:28 am on Feb 21, 2006 (gmt 0)

Good one P1R,

Label are particularly useful for the checkboxes and radio button - as you pointed out - because even for someone without physical or visual impariment it requires some focus to click on those tiny boxes.

I find it particularly useful when I'm in a hurry and want to subit the form quickly. Also useful for repetitive tasks when you want to select many checkboxes.

we need to ask BT to add label to the 3 checkboxes below the message box ;) - message notification ; disable graphics ; disable [code]


 1:31 pm on Feb 21, 2006 (gmt 0)

Yes, it recently was suggested, le_gber. We just may see this little enhancement in a future release of BestBBS -- we must think along the same lines, le_gber ;)

I think it is important enough to make a note in this thread again for those that are using implicit <label> controls -- Microsoft Internet Explorer will not function as you desire. You will have to add "for" attributes and use explicit controls to make your controls cross-browser (MSIE) compatible. More reading in the discussion linked in message #1.


 7:48 pm on Feb 21, 2006 (gmt 0)

I wrote this almost two years concerning this same issue of implicit labels...

The implicit method of associating a label with a form control is not supported by Internet Explorer (Tested Internet Explorer 6/Windows 98). IE does support the <label for="name"> method of associating labels. The below implicit label example performs as intended in both Opera 7.23 and Mozilla 1.6b on Windows 98.

<li><label><input type="radio" name="Labels" value="1" />This Radio Button 1 has a label associated with it.></label></li>

Global Options:
 top home search open messages active posts  

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved