Может ли метка ссылаться только на входные элементы?
Вопрос
W3Schools может вот что сказать о этикетки:
Тот самый
<label>
тег определяет метку для входные данные элемент. [Курсив мой]
Означает ли это, что следующий HTML-код недопустим?
<!doctype html>
<html>
<head>
<title>Example document</title>
</head>
<body>
<label for="x">Label</label>
<hr>
<div id="q" contentEditable="true">Hello</div>
<hr>
<div id="x" contentEditable="true">World</div>
</body>
</html>
Как Chrome, так и IE8 уделяют особое внимание World
когда Label
нажимается, Firefox - нет.Что из этого правильно?
Решение
В соответствии с W3C это применимо к элементам управления формами, а элементы управления формами являются определяется как:
- Кнопки
- Флажки
- Переключатели
- Меню
- Ввод текста
- Выбор файла
- Скрытые элементы управления
- Теги объектов
Таким образом, FireFox технически прав, хотя я бы вряд ли считал его "ломающимся", если бы браузер не ограничивал его этими элементами.
Другие советы
Спецификация HTML гласит, что примерно label
атрибут "for", если он присутствует, значение этого атрибута должно совпадать со значением атрибута id какого-либо другого элемента управления в том же документе.При отсутствии определяемая метка ассоциируется с содержимым элемента ".
Таким образом, ссылки на идентификаторы в "for" должны быть ссылками на элемент управления.Что такое элемент управления?Спецификация в основном гласит, что любой input
является элементом управления, как и button
, select
, или object
.Таким образом, Firefox технически прав - a div
это не контроль.
Я бы сказал, что это было неправильное использование разметки, потому что семантика меток такова, что они предназначены специально для элементов управления.
Элемент LABEL используется для указания меток для элементов управления, у которых нет неявных меток,
Об этом говорится в последней спецификации WhatWG:
Некоторые элементы, не все из которых связаны с формой, классифицируются как помечаемые элементы.Это элементы, которые могут быть связаны с элементом label.
button
,input
(еслиtype
атрибут не находится в скрытом состоянии),meter
,output
,progress
,select
,textarea
...
Тот самый
for
атрибут может быть указан для указания элемента управления формой, с которым должен быть связан заголовок.Если атрибут указан, значением атрибута должен быть идентификатор помечаемого элемента в том же дереве, что иlabel
элемент.
(Источник: https://html.spec.whatwg.org/multipage/forms.html.)
Другими словами, стандарт допускает только for
атрибуты, указывающие на элементы одного из 7 типов тегов, перечисленных выше.HTML, представленный в вопросе (который использует for
элемент, указывающий на редактируемый div
), следовательно, является технически недопустимым HTML в соответствии с текущей спецификацией.
Тот самый Средство Проверки Nu Html (который является одобрено WhatWG) соглашается;если вы попросите его подтвердить HTML-документ из вопроса, он скажет:
Ошибка:Ценность этого
for
атрибутlabel
элемент должен быть идентификатором нескрытого элемента управления формой.