Два поля ввода внутри одной метки

Рассмотрим следующее:

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

Является ли это семантически правильным, так как в рекомендациях W3C указано, что метка связана с точно одним элементом управления?

Нажатие на второй вход сдвигает фокус сразу на первый вход? Можно ли это предотвратить?

Как можно разбить комбинацию ввода min/max, чтобы показать, что два входа принадлежат друг другу?

Ответы

Ответ 1

Нет, это неверно (поскольку, как вы заметили, label связан с вводом формы один).

Чтобы пометить группу входов, которые принадлежат друг другу, используйте <fieldset> и 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>

Ответ 2

Как говорится в принятом ответе, это неверно, однако я считаю, что есть лучшие способы сделать это.

Доступные альтернативы:

Вариант 1 (с использованием атрибута aria-label):

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

Вариант 2 (с использованием скрытых тегов label):

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

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

Где класс .hidden доступен только для чтения с экрана.

Вариант 3 (используя атрибуты aria-labelledby):

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

Преимущества опции № 1: у каждого input есть хорошее описание, что другие предложения (например, добавление метки "to" ) не делают. Варианты № 2 и № 3 могут быть не самыми лучшими для этого конкретного случая, но стоит упомянуть о подобных случаях.

Источник: http://webaim.org/techniques/forms/advanced

Ответ 3

Как насчет этого:

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

Ответ 4

В соответствии с this - метка может содержать только один вход, поскольку он должен быть связан с только одним элементом управления. Ввод ввода внутри метки означает устранение атрибута for (автоматическое связывание).

Итак, вы должны либо поместить одиночный ввод в метку, либо указать атрибут for, который указывает на ввод id и не помещать ввод в метку. p >

Ответ 5

1 LABEL = 1 INPUT!!!

Если вы поместите 2 INPUTS внутри LABEL, он НЕ будет работать в Safari (и iPad и iPhone)... потому что, когда вы нажимаете внутри LABEL, он автоматически фокусирует первый INPUT... поэтому второй ввод невозможно ввести к.

Ответ 6

Я не думаю, что вы должны помещать поле ввода внутри элемента управления меткой.

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

ярлык - это просто ярлык для чего-то.