Label properties for form elements

[beetle]

Ok, this is pretty simple, but if you've ever wished that the DOM exposed a label property for any form element that had a label specified for it, well, you'll enjoy this.

!! UPDATED A FEW POSTS DOWN !!

function addLabelProperties( f )
{
    var labels = f.getElementsByTagName( "label" );
    for ( var i = 0; ( label = labels[i] ); i++ )
        f.elements[label.htmlFor].label = label;
}

Just pass it a reference your form and voila! You now have element.label

[brothercake]

That's really cool I'm sure there's potential for usability/accessibility widgets with that - being able to iterate through a form by element/label association - it could make complicated forms more useable by (for example) generating a summary-map with labels and accesskey associations. Nice

[beetle]

I know! I can't see myself doing any dynamic form stuff w/o this! Sometimes the simplest things are the coolest! I can even integrate this with fValidate...instead of error-coloring the elemnt itself, I can color the label or even add an "Error" next to the label

[jkd]

Hmm, it might be a bit better to do something like:

HTMLInputElement.prototype.__defineGetter__('label', function() {
var labels = document.getElementsByTagName('label');
for (var i in labels) {
if (labels[i].htmlFor == this.id) return labels[i];
}
return null;
});

Now even dynamically created form elements will inherit the label property... of course, gecko is the only browser cool enough to expose constructors for DOM interfaces, but hey, it rocks anyway.

[beetle]

Originally posted by jkd
Hmm, it might be a bit better to do something like:

I think we'd best first decide on how that is "better"

I think it gets the job done "better" but from a standpoint of actually making use of it in today's browser audience, it is far from "better"

A workaround for dynamically made elements, you'd most likely be making the label AND the element at the same time, so tying the two together at creation shouldn't be that difficult

[jkd]

Originally posted by beetle
I think it gets the job done "better" but from a standpoint of actually making use of it in today's browser audience, it is far from "better"

Oh yes, but I'm a theory guy. Theory is almost always more interesting than application, and usually better.

Stupid application.

[beetle]

I guess that makes me an "application guy"

Stupid theory

[beetle]

Here's the updated version. It handles all form controls and has a few other fault tolerance measures. I also commented it

function addLabelProperties( f )
{
    //    Collect all label elements in form, init vars
    if ( typeof f.getElementsByTagName == 'undefined' ) return;
    var labels = f.getElementsByTagName( "label" ),
        label,
        elem,
        i = j = 0;

    //    Loop through labels retrieved
    while ( label = labels[i++] )
    {            
        //    For Opera 6
        if ( typeof label.htmlFor == 'undefined' ) return;
        
        //    Retrieve element
        elem = f.elements[label.htmlFor];

        if ( typeof elem == 'undefined' )
        {    //    No element found for label
            alert( "No element found for label: " + label.htmlFor );
        }
        else if ( typeof elem.label != 'undefined' )
        {    //    label property already added
            continue;
        }
        else if ( typeof elem.length != 'undefined' && elem.length > 1 && elem.nodeName != 'SELECT' )
        {    //    For checkbox arrays and radio-button groups
            for ( j = 0; j < elem.length; j++ )
            {
                elem.item( j ).label = label;                    
            }
        }
        //    Regular label
        elem.label = label;            
    }
}

This is the version of this function I'm using in fValidate - and it works great!

[FoxtrotU]

Beetle,

I was wondering if this will help me out with the my post about reading the labels of radio and check buttons? I am extremely new to this and would like an example of how to use your function. Any help would be appreciated.

Thanks.