Two input fields inside one label

No, it's not correct (since, as you note, a label is associated with exactly one form input).

To label a group of inputs that belong together, use a <fieldset> and a <legend>:

<fieldset>
  <legend>Range</legend>
  <label for="min">Min</label>
  <input id="min" name="min" />

  <label for="max">Max</label>
  <input id="max" name="max" />
</fieldset>

References:

<input />^{HTML 5 spec}.
<fieldset>^{HTML 5 spec}.
<label>^{HTML 5 spec}.
<legend>^{HTML 5 spec}.

As the accepted answer states, that's not correct, however I think there are better ways to do it.

Accessible alternatives:

Option 1 (using the aria-label attribute):

Range:
<input ... aria-label='Range start' />
<input ... aria-label='Range end' />

Option 2 (using hidden label tags):

<label for='start'>Range start</label>
<input type='text' id='start' />

<label for='end' class='hidden'>Range end</label>
<input type='text' id='end' />

Where the .hidden class is only readable by screen readers.

Option 3 (using aria-labelledby attributes):

<label id='lblRange'>Range</label>
<input type='text' id='start' aria-labelledby='lblRange' />
<input type='text' id='end' aria-labelledby='lblRange' />

Advantages of option #1: Each input has a good description that other suggestions (such adding a "to" label) do not. Options #2 and #3 might not be the best for this specific case, but worth mentioning for similar cases.

Source: http://webaim.org/techniques/forms/advanced

I see many answers saying it is wrong to put 2 inputs inside a label. This is actually a wrong statement in html5. The standard explicitly allow it: http://www.w3.org/TR/html5/forms.html#the-label-element

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.

If a label element has interactive content other than its labeled control, the activation behavior of the label element for events targeted at those interactive content descendants and any descendants of those must be to do nothing.

However, Safari does not respect the html5 standard here (tested on iOS 11.3). So, someone that wants to be compatible with Safari must use workarounds here or wait until Apple fixes its browser.

Two input fields inside one label

Related

Recent Posts