Getting around label click property

I'm using labels for a form. When you click on a "line" of a label, this will select the input for you, which is natural.

However, when I wanted to use, for example, 3 selects within the same <label> (DD/MM/YY), it won't select none, probably given that there should only be one input.

Is there any way to make it so l开发者_Go百科abels won't automatically focus on an input, or should I pick another way to place the selects?

You can put the ID of the label same as the first field of the date input. For example see the demo here:

http://jsfiddle.net/E4Fh5/1/

I believe the convention in this case is to assign the label to the first select element.

http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1

for = idref [CS] This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

I'm assuming you currently have the <select> inside of the <label>.

If you move the content outside without setting the for attribute, it should do what your're after:

<label>Date<label><select></select>...

For accessibility of screen readers, you should actually have 3 labels here, one for each select, but you probably only want the first one to be visible and as Tobias said, assigned to the first select.