Правильная разметка HTML-формы - PullRequest
Новая
       15

Правильная разметка HTML-формы

2 голосов
/ 14 декабря 2011

У нас есть обсуждение, так как в настоящее время я исправляю ошибку 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>?

Ответы [ 3 ]

1 голос
/ 14 декабря 2011

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

Например, любой встроенный элемент допускается внутри <label>. : 

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

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

0 голосов
/ 14 декабря 2011

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

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

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

  • div - это семантически пустой элемент, часто удобный
  • fieldset может быть логичным, но требует легенды по старым правилам и по умолчанию создает специальный вид границы
  • p будет в порядке по правилам HTML5 (которые свободно интерпретируют концепцию абзаца), но вряд ли что-то выиграет по сравнению с div - скорее, это может означать слишком большие верхние и нижние поля по умолчанию.
0 голосов
/ 14 декабря 2011

Вы должны использовать его, как описано здесь: 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>
...