p против ol или ul для моделирования формы

Question

Обычно я оформляю формы с неупорядоченным тегом списка, например

<fieldset>
    <ul>
        <li>
            <label for="txtName">Name</label>
            <input type="text" id="txtName" />
        </li>
    </ul>
</fieldset>

Однако часто я вижу разметку, в которой вместо этого используется тег <p>, например:

<fieldset>
    <p>
        <label for="txtName">Name</label>
        <input type="text" id="txtName" />
    </p>
</fieldset>

Что из этого является более семантически правильным? Есть ли плюсы или минусы в разных методах, кроме того, что стиль <p> более лаконичен?

Редактировать: Ясно, что здесь можно открыть банку с червями - больше возможностей, га! :) Есть ли у W3C рекомендации здесь?

Забавно, но рекомендация W3C кажется наименее элегантным решением:

<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>

Жаль, что нет лучшего руководства в отношении лучшего соглашения для разметки элементов формы.

Answer 1

По моему мнению, группа элементов управления формой не является ни элементом списка, ни абзацем. Размечая формы, я разделяю свои группы меток / вводов, оборачивая их в <div> s. Если вы пытаетесь разметить div между элементами управления формой, не бойтесь использовать <div>.

<fieldset>
  <div class="field">
    <label for="txtName">Name</label>
    <input type="text" id="txtName" />
  </div>
  <div class="field">
    <label for="txtTitle">Title</label>
    <input type="text" id="txtTitle" />
  </div>
</fieldset>

Из приведенных вами примеров, <p>, вероятно, ухудшается "лучше", потому что вы не увидите маркеры рядом с вашими элементами, если CSS будет недоступен, а группы элементов управления, вероятно, будут достаточно хорошо расположены.

Answer 2

Не забудьте список определений:

<fieldset>
    <dl>
        <dt><label for="txtName">Name</label></dt>
        <dd><input type="text" id="txtName" /></dd>
    </dl>
</fieldset>

Там нет реального правильного ответа. Выберите разметку, которая наиболее вам подходит. Для меня формы не являются неупорядоченным списком. Список определений мне ближе.

Answer 3

Как правило, поля форм не являются ни абзацами, ни элементами списка, если говорить семантически. Если вам требуется, чтобы поля формы были сгруппированы вместе, вероятно, <div> s с классами являются наиболее подходящими, но если вы просто ищете контейнер вокруг пары <label> / <input>, рассмотрите альтернативный метод для связывания метки с полем:

<fieldset>
    <label>Name <input type="text" id="txtName"/></label>
    <label>Location <input type="text" id="txtLocation"/></label>
</fieldset>

Затем вы можете стилизовать или манипулировать ими вместе без искусственной обертки (и без необходимости снова беспокоиться о for=).

Answer 4

Я склонен использовать упорядоченные списки

<fieldset>
<ol>
    <li>
        <label for="txtNameFirst">Name</label>
        <input type="text" id="txtNameFirst" />
    </li>
    <li>
        <label for="txtNameLast">Name</label>
        <input type="text" id="txtNameLast" />
    </li>
</ol>
</fieldset>

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

Семантически, я думаю, что список определений также содержит воду, и он имеет дополнительное преимущество - предоставляет обертку для каждой пары метка / вход, а также для каждой отдельной метки и ввода, что может дать вам большой контроль над дизайном ( если вы можете жить с легким упрямством наложения DL вокруг каждой пары метка / вход)

<fieldset>
    <dl>
        <dt><label for="txtNameFirst">Name</label></dt>
        <dd><input type="text" id="txtNameFirst" /></dd>
    </dl>
    <dl>
        <dt><label for="txtNameLast">Name</label></dt>
        <dd><input type="text" id="txtNameLast" /></dd>
    </dl>
</fieldset>

Если упорядоченные / неупорядоченные списки / определения просто не ваша вещь, то я бы пошел с div. Их единственная подразумеваемая семантика - «разделение», поэтому они подходят для работы.

Мне трудно оправдать использование элементов параграфа (p) для переноса пар метка / вход, поскольку подразумеваемая семантика элемента p просто не применима, на мой взгляд. (также было бы неплохо оставить элемент p доступным для использования внутри формы для пояснительного текста при необходимости)

Answer 5

Ключевым моментом, который W3C выкладывает для форм, является то, что форма настроена таким образом, что метки и элементы формы могут быть легко сгруппированы программно:

1.3.1 Информация и взаимосвязи. Информация, структура и взаимосвязи, передаваемые посредством презентации, могут быть определены программно или доступны в текстовом виде.

В частности Техника HTML 44: Использование элементов метки и Техника HTML 71: Предоставление описания .

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

Обычно наши дизайнеры работают с Заком - строки нашей формы заключены в div с классом "formrow" или аналогичным.

Answer 6

WHATWG фактически считает каждую часть формы абзацем :

Каждая часть формы считается абзацем и обычно отделяется от других частей с помощью p-элементов.

Я не уверен, согласен ли я с этим, но это, похоже, самый «официальный» ответ на проблему, которую вы можете получить. К сожалению, я не смог найти никакого объяснения.

Answer 7

Я обычно использовал одну комбинацию <div> на <label> и <input>, пока не получил новую работу, где нормой был неупорядоченный список. У меня есть коллега, который ругается по таблицам (один столбец для меток, один для полей), утверждая, что это просто табличные данные с возможностями редактирования.

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