Two input fields inside one label

Question

Consider the following:

Range from 
     to
    

Answer 1

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.

Answer 2

1 LABEL = 1 INPUT !!!

If you put 2 INPUTS inside a LABEL, it will NOT work in Safari (and iPad and iPhone)... because when you click inside LABEL it automatically focuses the first INPUT... so the second input is impossible to type to.

Answer 3

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

Answer 4

How about this:

<label> Range from <input name='min_value'> </label>
<label> to <input name='max_value'> </label>

Answer 5

i don't think you should be putting the input field inside the label control.

<label for="myfield">test</label><input type="text" id="myfield" name="myfield />

the label is just that, a label for something.

Answer 6

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, WHATWG definition}.
• <fieldset>^{HTML 5 spec, WHATWG definition}.
• <label>^{HTML 5 spec, WHATWG definition}.
• <legend>^{HTML 5 spec, WHATWG definition}.