[thelist] FireFox doesn't do backgroundColor for checkboxes or radios?

Keith Gaughan keith at digital-crew.com
Sat Feb 12 14:23:07 CST 2005

Sorry about taking so long about getting back about this: I've been
horribly busy on a project here at work and haven't had time to write
anything but the most cursory replies.

Dave Merrill wrote:

> Thanks Keith, right on the money.

No problem.

> Using <label> does mean using IDs on everything. Gives you more flexibility
> for other manipulation anyway. Do you just use the field name as the id,
> except when it's a multiple (radios, checkboxes)?

Generally, yeah.

> For multiples, do you make the overall field label for the group the
> official label, or the text associated with each individual radio?

That depends. If we're talking about radio buttons and checkboxes, then
each element has its own label. However, their names all follow the same
form (groupName_value), so when I'm validating, I check for the
underscore in the name and highlight the label for that id.

> I've also been looking at table-less form layout
> (http://www.quirksmode.org/css/forms.html). Going that way would allow the
> label to contain the control, so no id would be needed. My understanding
> though is that that wouldn't work for multiples, since only one control can
> be inside a label.

Indeed you're right. But for radio buttons and checkboxes, this ought
not be a problem as they should all have individual labels anyway.

> Re performance, I recently worked on a large joint surgery outcome research
> project, where some of the forms were nasty big, even split into multiple
> pages. JS seems pretty fast, and performed fine in those contexts, but I
> wasn't doing multiple runs of this kind of scan, which you would have to do.

Well, when it come to multiple scans, you'd be talking about absolutely
monstrous forms before you saw some kind of horrible slowdown. We're
talking forms with more than 50 individual elements here. But even then,
you can do a single scan to get back the labels associated with each of
them in an array, and then do a single lookup given the id of the field:

     function MakeLabelMap()
         var labels   = document.getElementsByTagName('label');
         var labelMap = new Object();
         for (var i = 0; i < labels.length; i++)
             labelMap[labels[i].htmlFor] = labels[i];
         return labelMap;

Now you can do a label lookup instantly:

     var labelMap = MakeLabelMap();

     // Mark this label element as bad.
     labelMap['formElementId'].className += " bad";


More information about the thelist mailing list