HTML form label has two options

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.

why don't you move the elements outside the labels? I don't get it... The normal way to do this is by using the `for` attribute of a `label` element. You will still have the same visual output and if you click on the label the specified element would be focused. — ikromm, Jul 17 '13 at 08:39
@JohnKrommidas I think in the past I'd found the technique I'm currently using and just stuck with it, never been a problem up until now. As some of the other answers state, it does seem a valid technique until I try and do something slightly different from the norm. — Chris, Jul 17 '13 at 08:52

Martin Turjak · Accepted Answer · 2013-07-17T08:48:22.677

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.

insertusernamehere · Answer 2 · 2013-07-17T09:11:31.190

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.

score 1 · Answer 3 · edited May 23 '17 at 12:11

1

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.

edited May 23 '17 at 12:11

Community

1
1

answered Jul 17 '13 at 08:45

Michael

2,309
1
23
34

A quote on that page: `I like to use either the first or second example, as it gives you more style control`. I think I may have backed myself into a corner by doing it the way I've currently done things (on that post, the third technique mentioned). – Chris Jul 17 '13 at 08:49

score 0 · Answer 4 · answered Jul 17 '13 at 08:43

0

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).

answered Jul 17 '13 at 08:43

Sergiy T.

1,433
1
23
25

HTML form label has two options

4 Answers4