Если форма HTML5 w3.org специфицирует <input>внутри родительского <label>, почему большинство страниц реализуют их как родные братья?

Question

Я читал спецификацию формы *1001* w3.org HTML5 и был удивлен, увидев следующий HTML:

<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>

Семантически это меня смущает. Разве <label> не имеет больше смысла в качестве родного брата для <input>, а не в качестве родителя?

В дикой природе я более привык видеть следующую конфигурацию:

<p>
  <label for="customer_name">Customer name:</label>
  <input id="customer_name" name="customer[name]">
</p>

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

Я исправлен, но, похоже, каждый генератор разметки и помощник по формам, которые я использовал, существенно нарушают предложения W3 - даже те, которые требуют поддержки HTML5, с использованием проверок на стороне клиента и т. П.

Мысли

Answer 1

Обе формы действительны согласно спецификации:

Атрибут for может быть указан для указания элемента управления формы, с которым должен быть связан заголовок.Если атрибут указан, его значение должно быть идентификатором элемента, связанного с формой, в том же документе, что и элемент метки.Если атрибут указан и в документе есть элемент, идентификатор которого равен значению атрибута for, и первый такой элемент является помеченным элементом, связанным с формой, то этот элемент является помеченным элементом управления элемента label.

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

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

Answer 2

Здесь это очень хорошо объяснено - http://blog.paciellogroup.com/2011/07/html5-accessibility-chops-form-control-labeling/

Answer 3

Под этим написано:

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

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