Can the label tags for attribute be associated with a normal div?

Question

is it valid html under html5 definitions to use a label's "for" value as an id of a normal div element (for example I have made a custom dropdown list implementation which is encased inside a div)

Please let me know if possible,

Thomas

Answer 1

Not according to the spec:

Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.

"button" "input" (if the type attribute is not in the hidden state) "keygen" "meter" "output" "progress" "select" "textarea"

http://www.w3.org/TR/html5/forms.html#category-label

See also:

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element's labeled control.

http://www.w3.org/TR/html5/the-label-element.html#attr-label-for

I do think the question presents a valid use case. I'm not sure what the recommended pattern is for such a scenario, though ARIA attributes might help to make the markup more accessible:

https://developer.mozilla.org/en/Accessibility/ARIA/forms/Basic_form_hints https://developer.mozilla.org/Special:Tags?tag=ARIA

Answer 2

As Tim noted it is not possible to do it natively, however with a little bit of javascript you can simulate it

jQuery(document).delegate('[for]','click',function(e){     var targetEl = jQuery('#'+jQuery(this).attr('for'));     if(targetEl.is('div.your-custom-dropdown-class')) { //if targetEl is one of your dropdowns         e.preventDefault();         targetEl.trigger('click'); //open the drop down     } });