Можно ли группировать элементы формы в «p»?

Question

Допустим, у меня есть этот код

<form action="#" method="get">
    <p>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </p>
    <p>
        <input type="submit" />
    </p>
</form>

Семантически ли хорошо группировать элементы с p ? Потому что мой учитель (опять же .. я знаю ..: P) сказал мне, что p следует использовать только для абзаца и что вместо этого я должен использовать div , но, как я вижу, p используется много и почти везде.

Последняя возможность, о которой я могу подумать, это <br />, что я считаю худшим способом.

Итак, какой из них лучше использовать

• упаковка по <div>
• упаковка по <p>
• <br /> в конце

Answer 1

Проверьте этот связанный вопрос и этот .

Честно говоря, я не думаю, что это огромная сделка, но использование <fieldset>, вероятно, является наиболее семантически правильным способом, который сделает вашего учителя счастливым. Однако в реальном мире я группирую формы по <p> иногда.

Answer 2

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

Если вы хотите иметь группу полей, fieldset подходит для этого, но я почти всегда помещаю каждый элемент формы в <li>.

Answer 3

Ваш учитель прав. P = абзац. Так что задайте себе вопрос, это абзац текста? Если нет, не используйте его.

Вы бы не играли в футбол с крикетным мячом только потому, что он круглый

Answer 4

Я использую <div class="field">...</div> для отдельных полей формы и <fieldset>...</fieldset> для групп связанных полей.

Для кнопок в конце формы (отправить / сброс / назад / и т. Д.) Я использую <fieldset class="controls">...</fieldset>

(У меня также есть набор сценариев пользовательских тегов CFML, которые генерируют HTML для меня, поэтому я могу просто написать, например, <form:edit id="MyField" label="My Field" ...etc... />, и он генерирует соответствующий HTML, не требуя большого количества повторяющегося исходного кода.)

Answer 5

Семантически, я бы (в этом случае) согласился с вашим учителем и предпочел бы

, чем

.

Answer 6

Ни то, ни другое.

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

• P неправильно, потому что форма просто не является абзацем.
• DIV не имеет никакого семантического значения - это просто «часть чего-то», поэтому использование его в одиночку для содержания формы не имеет смысла.
• Разделение по BR не имеет смысла, так как вы можете также обеспечить стилизацию для ваших надписей и / или полей ввода для имитации разрыва строки.

Answer 7

Я бы обернул его, используя <div/>, а затем применил стиль с помощью CSS.

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