Может ли поле ввода иметь две метки?

У Марии была маленькая форма, и ее поля были помечены именно так.
Всякий раз, когда ошибка закралась, замешательство это посеет.

У меня есть метка для каждого поля ввода... довольно стандартное дело. После проверки формы я показываю полезный маленький абзац в верхней части формы, в котором подробно описывается, какая информация отсутствует или неверна.

Могу ли я иметь две метки для одного поля ввода? Один в правильной форме, а другой в тексте напоминания о проверке? Есть ли причина, по которой я не должен этого делать?

Ответ 1

Я предполагаю, что этот вопрос о формах HTML. Из спецификации:

Элемент LABEL может использоваться для прикрепления информации к элементам управления. Каждый элемент LABEL связан только с одним элементом управления формой.

Таким образом, на каждый элемент управления формы могут ссылаться несколько меток, но каждая метка может ссылаться только на один элемент управления. Поэтому, если имеет смысл иметь вторую метку для элемента управления (и в описываемой вами ситуации, это так), не стесняйтесь добавлять вторую метку.

Ответ 2

HTML является законным, и он работает (нажатие на любую из надписей будет передавать фокус в соответствующее поле).

Это немного сложнее сделать правильно для причин доступности.

Это не "общий" подход, и из-за этого хотя бы один общий экранный ридер (я тестировал с NVDA) читал только первую метку при переключении фокуса в поле - он игнорирует любые дополнительные метки для одного и того же поля.

Итак, если ваше сообщение об ошибке находится в верхней части страницы, пользователь вслепую или с низким уровнем видимости, перемещающийся по полям, будет слышать только сообщение об ошибке при посадке в соответствующем поле, а не "реальную" метку рядом с ней.

Следовательно, если вы правильно определяете сообщение об ошибке, это может быть хорошо (конечно, лучше, чем просто выделить неаудирующее поле красным!).

Ответ 3

Да, вы можете использовать несколько меток в одном элементе управления формы. Это совершенно законно:

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

Это просто пример... как правило, вы обертываете эти строки одной меткой, так как они близки.

Ответ 4

Я не пробовал, но думаю, это будет возможно. Но я не рекомендую использовать его, потому что метка определяет, для чего это поле, сообщение об ошибке отсутствует. Поэтому я не должен использовать метку для предупреждений о валидации.

Ответ 5

Попробовали ли вы, что происходит? Если это работает, я не верю, что это нанесет какой-либо ущерб вашей форме или странице. И вы получите плюс, потому что использование сможет щелкнуть по ошибке проверки и сосредоточиться на правильном поле.

Ответ 6

Хотя это допустимо, это не лучший способ связать несколько меток с одним элементом <input>. Вместо этого вы должны использовать атрибут aria-labelledby.

Сначала вы присваиваете уникальные атрибуты id элементам <label>. Затем вы aria-labelledby атрибут aria-labelledby в элемент <input>, устанавливая его значение в значения id из элементов <label>, разделенных пробелом.

Вот пример со страницы "Использование атрибута aria-labelledby" в веб-документе MDN:

<div id="billing">Billing</div>

<div>
    <div id="name">Name</div>
    <input type="text" aria-labelledby="billing name"/>
</div>
<div>
    <div id="address">Address</div>
    <input type="text" aria-labelledby="billing address"/>
</div>