P против ol или ul для стилизации формы

Как правило, я стиль формы с неупорядоченным тегом списка, например.

<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>

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

Ответы

Ответ 1

По моему мнению, группа элементов управления формами не является элементом списка или абзацем. Когда я помечаю формы, я разделяю свои группы меток/ввода, обертывая их в <div> s. Если вы пытаетесь выделить div ision между элементами управления формами, не бойтесь использовать <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 был недоступен, и группы элементов управления, вероятно, будут достаточно хорошо отстоять.

Ответ 2

Не забывайте Список определений:

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

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

Ответ 3

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

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

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

Ответ 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>

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

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

Ответ 5

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

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

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

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

Вообще, хотя наши дизайнеры с Zack - наши строки формы завернуты в div с классом "formrow" или схожим.

Ответ 6

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

В этот момент я считаю, что ввод как неупорядоченный список - лучшая семантическая подгонка, но, как вы заметили, есть много мнений по этому вопросу.