Корректная разметка HTML-формы

Question

У нас есть обсуждение, поскольку я в настоящее время исправляю ошибку IE7, так как <label> и <input> теги были обернуты в <p>.

Я не могу найти документацию для правильной семантики для тегов, содержащихся в теге <form>. Я предпочитаю использовать следующие, например,

<form action="" method="post"> 
    <fieldset> 
    <div class="formrow"> 
     <label for="firstname">Firstname:</label> 
     <input type="text" id="firstname" name="firstname" /> 
    </div> 
    </fieldset> 
</form> 

Однако, глядя на Zurb Foundation они не зацикливаются каких-либо элементов вообще, может быть, по стилю, но для radio и checkbox они положили <input> внутри <label>, который я не думаю, что это действительно. Хотя страница Zurb использует HTML5, так что, возможно, это действительно там?

Twitter Bootstrap имеет тенденцию идти с двойным обертыванием <div> подход, похожий на мой. Но опять же они тоже, оберните входы radio и checkbox внутри этикетки.

Итак, на мой вопрос, существуют ли какие-либо окончательные правила для семантики элементов внутри тега <form>?

Answer 1

Если вы хотите знать, какие элементы могут быть потомками элементов формы, я предлагаю взглянуть на forms section из HTML4 specification (или пройти через эквивалентный HTML5 section).

Например, any inline element is allowed inside <label>.:

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text --> 

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

Answer 2

Вы должны использовать его, как описано здесь: http://www.w3schools.com/html5/tag_fieldset.asp Пример: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_fieldset

По желанию, вы можете обернуть «описание» поля ввода в элемент

<label> 

.

<label for="name_of_inputfield">Name:</label> 

Примечание это хороший стиль для использования в

<legend> 

тег, если вы с помощью

<fieldset> 

Answer 3

Образец разметки недействителен XHTML 1.0, как FIELDSET элемент делает не содержит требуемого элемента легенды. В HTML5 это было бы правильно, но атрибут action = "" не разрешен (значение атрибута действия не должно быть пустым).

Но на практике разметка наложения полей бессмысленна - элемент полезен для группировки полей, но образец не содержит полей вне группы. Разметка div также является излишней, хотя это требуется по строгим правилам XHTML 1.0. Но, вероятно, реальные формы разные. Если у вас несколько «строк», как предполагает название класса «formrow», то вероятность того, что элемент таблицы является оптимальной разметкой.

Существует три причины для обертывания поля и ее метки в элементе контейнера: для удовлетворения HTML 4.01 Strict и XHTML 1.0 Строгие правила (которые требуют, чтобы что-либо внутри формы было обернуто в контейнер уровня блока), чтобы сделать можно стилизовать их в целом и упростить обработку их как единицы в клиентских сценариях. Для такой упаковки,

• ДИВ семантически пустой элемент, часто удобно
• FIELDSET может быть логичным, но требует легенды по старым правилам и по умолчанию создает особый вид границы
• р будет ОК на HTML5 (которые интерпретируют концепцию абзаца либерально), но вряд ли что-то выигрывает по сравнению с div-скорее, это может означать, что верхние и нижние поля по умолчанию слишком велики.