Почему W3C рекомендует заключать элементы ввода в теги <p>? - PullRequest
28 голосов
/ 04 августа 2011

Я видел много примеров в Интернете, где формы располагаются так:

<form>
    <p><input></p>
</form>

К моему удивлению, это также описано в спецификации :

Любая форма начинается с элемента формы, внутри которого размещены элементы управления.Большинство элементов управления представлены элементом ввода, который по умолчанию содержит однострочное текстовое поле.Для маркировки элемента управления используется элемент label;текст метки и сам элемент управления находятся внутри элемента метки.Каждая часть формы считается абзацем и обычно отделяется от других частей с помощью p-элементов.В целом, вот как можно спросить имя клиента:

Хотя этот раздел не является нормативным, мне все же кажется, что это плохая практика, а не семантическая.Я полагаю, что цель состоит в том, чтобы поместить входные данные в их собственную строку, но разве не следует управлять отображением этих элементов с помощью CSS?

Есть ли причина, по которой W3C советует создавать формы таким образом?Я что-то упустил?

Ответы [ 4 ]

29 голосов
/ 04 августа 2011

Если вы пишете форму осмысленным (читай: семантическим) способом, вам нужно, чтобы поток текста привел к элементу:

<form>
 <p><label for="firstName">Please enter your first name:</label><input id="firstName" type="text" /></p>
</form>

Еще лучший способ - обработать вашу форму, как сценарий mad-libs:

<form>
  <p>Hello. My <label for="firstName">name</label> is <input id="firstName" type="text" />...</p>
</form>

Элемент p - не единственный способ разметки формы. Если матрица данных добавляется / редактируется, семантически допустимо использовать таблицу.

В других случаях вы можете не хотеть использовать элемент обтекания. Это зависит от того, какой контент вы хотите подавать. Беспокойство по поводу стилизации всего этого после того, как вы разобрали свой контент.

3 голосов
/ 04 августа 2011

Элементы INPUT встроены, поэтому имеет смысл обернуть их в какой-нибудь блочный элемент, чтобы между ними было естественное разделение. Поскольку DIV по умолчанию не имеет полей, не имеет ли смысл использовать абзац?

2 голосов
/ 10 апреля 2018

Ни одна из ведущих фреймворков css / html / grid не использует P теги

см. Здесь bootstrap или foundation

imho use fieldset и дел.

в то время как w3c рекомендует использовать теги параграфа <p> бессмысленно следовать их советам.Причина в том, что вы ограничиваете себя.То есть: если вы пишете свои компоненты, используя теги p, вы не сможете поместить в него div. Помещение

хорошо, почему вы хотите поместить div в тег p?а почему бы не?например, вы хотите стилизовать контент каким-либо образом или добавить некоторую информацию.Используя теги p, вы застряли сейчас.Мне кажется, это тоже плохой совет.

Ответ:

беспокоиться о стилизации после того, как вы разобрались с контентом

вродепредполагает, что вы знаете, что вам понадобится, скажем, через год.

мой совет: вы не хотите быть похожим на

"Хотелось бы, чтобы я не использовал ограничительныйP теги "

0 голосов
/ 04 августа 2011

Это относится к HTML 4, возможно, не к запрашиваемому HTML 5.

http://www.w3.org/TR/html401/interact/forms.html#edef-FORM

form нужен элемент уровня блока как дочерний. input это встроенный элемент. p делает свое дело.

...