Может ли метка ссылаться только на входные элементы?

StackOverflow https://stackoverflow.com/questions/1094352

  •  11-09-2019
  •  | 
  •  

Вопрос

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 используется для указания меток для элементов управления, у которых нет неявных меток,

http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

Об этом говорится в последней спецификации 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 элемент должен быть идентификатором нескрытого элемента управления формой.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top