Search code examples
htmlaccessibility

Two input fields inside one label

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?

Solution

  • 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: