Блог

Главная - Вопросы по программированию - Могу ли я использовать несколько меток для элемента формы?

Могу ли я использовать несколько меток для элемента формы?

#html #forms

#HTML #формы

Вопрос:

Будет ли следующее допустимым использованием элемента label в HTML5? 

 <label for="select">Some text</label>
<select id="select">
   ...
</select>
<label for="select">...more text</label>

Спецификации HTML5, похоже, ничего не говорят об этом.

редактировать: этот вопрос теперь устарел. В текущей формулировке ясно, что один элемент может иметь несколько меток (но не наоборот):

С помечаемыми элементами связан объект NodeList, который представляет список элементов label в древовидном порядке, помеченный элемент управления которого является рассматриваемым элементом.

Ответ №1:

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

Согласно документации HTML 4:

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

Атрибут for явно связывает метку с другим элементом управления: значение атрибута for должно совпадать со значением атрибута id связанного элемента управления. Несколько МЕТОК могут быть связаны с одним и тем же элементом управления путем создания нескольких ссылок с помощью атрибута for .

Комментарии:

1. Думаю, это максимально близко, хотя я все еще могу понять это из спецификации HTML5

2. Я мог бы добавить, что в текущей редакции спецификации html5 подразумевается, что один элемент может иметь несколько меток (но не наоборот).

Ответ №2:

Я только что проверил, будут ли текущие комбинации программы чтения с экрана / браузера вести себя так, как ожидалось, то есть: они связывают все существующие метки с вводом и объявляют их все при фокусировке ввода. Это особенно полезно при вводе вкладок через формы с помощью программы чтения с экрана Windows Desktop.

 <label for="name">Your name:</label>
<input id="name" />
<label for="name">If forgotten, please consult your birth certificate.

Codepen: https://codepen.io/jmuheim/pen/OJvxzVG

  • NVDA Chrome: работает ✅
  • NVDA FF: работает ✅
  • JAWS Chrome: работает ✅
  • JAWS FF: работает ✅

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