Question

Consider the following:

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

Is this semantically correct since the W3C recommendations state that a label is associated with exactly one form control?

Clicking into the second input shifts focus immediately to the first input? Can this be prevented?

How would one markup a min/max input combination to show that two inputs belong together?

Answer 1

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