HTML form label has two options - html

Question

I normally style my forms in the format
<label for="CompanyNameTextBox">
<span>Company</span>
<input name="CompanyNameTextBox" type="text" id="CompanyNameTextBox" />
</label>
This way I can style the CSS like so:
.input[type=text] span
{
display: inline-block;
width: 200px;
}
and I get a nice side by side arrangement with my labels to the left of the form elements. This works for all elements I should add.
Now, I have a field: Credit Card Expiry Date.
This is special, I have two select lists in a single label:
<label>
<span>Expiry Date</span>
<select name="ExpiryDateMonthDropDownList" id="ExpiryDateMonthDropDownList">
...
</select>
<select name="ExpiryDateYearDropDownList" id="ExpiryDateYearDropDownList">
...
</select>
</label>
If I try to select the latter (Year) it defaults back to selecting the first (Month), even though I haven't specified a for attribute on the label.
So the question would be, what can I do? I can't work out if I'm doing forms wrong (I shouldn't in fact put the input inside the label) or if I have to do some silly workaround like stick the second select inside it's own label.

Answer 1

MDN on <label> says:
The HTML Element represents a caption for an item in a user
interface. It can be associated with a control either by using the for
attribute, or by placing the control element inside the label element.
Such a control is called the labeled control of the label element.
and
No labelable elements other than the labeled control are allowed.
So if you put an control element inside a label it is the same as writing a label for this element, so you see where the problem appears when you place two input fields inside a label.
You can just place the second control outside, or both outside the label and make a for for the first input element, or yes you can make two separate labels for the two input fields, any of this combinations should work when you specify the forattribute.

Answer 2

The specs for HTML5 "w3.org: 4.10.6 The label element" say:
If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.
For HTML 4 "w3.org: 17.9.1 The LABEL element it's even more strict:
The label element may be used to attach information to controls. Each label element is associated with exactly one form control.
So you may have to wrap both in a container to get the same visual output:
<div class="multiple_inputs">
<label>
<span>Expiry Date</span>
<select name="ExpiryDateMonthDropDownList"></select>
</label>
<select name="ExpiryDateYearDropDownList"></select>
</div>
Of course you can add another <label> to the second field as well.

Answer 3

As already said in Should I put input tags inside a label tag? this is perfectly valid according to w3 but may produce problems with WCAG and some browser implementations.
In this case, you have two input elements inside just one label, which is not good, as there should be one label for each input element. So my proposal is to add another label and just put one element inside of each.

Answer 4

Perhaps if form elements are in label, it selects first element by default. But you can specify second field as for attribute (may be browser-specific, works in firefox 22).