HTML-формы - по вашему мнению, как они должны быть сделаны и почему?(<div> против <p>)

Question

Я был разработчиком в течение долгого времени, однако формы всегда были моей самой нелюбимой частью, точнее, их дизайном!

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

Пример того, о чем я говорю:

<form action="" method="post">
    <p>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" />
    </p>

    <p>
        <label for="submit"></label>
        <input type="submit" name="submit" id="submit" value="Log In" />
    </p>
</form>

VS

<form action="" method="post">
    <div>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" />
    </div>

    <div>
        <label for="submit"></label>
        <input type="submit" name="submit" id="submit" value="Log In" />
    </div>
</form>

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

Спасибо за ваше время:)

UPDATE В итоге я прочитал хорошую статью о формах HTML5 и нашел, что она позволяет НАМНОГО лучше оформлять формы. Они гораздо более организованы с точки зрения развития. Для всех, кто заинтересован, он находится здесь: http://24ways.org/2009/have-a-field-day-with-html5-forms

Answer 1

HTML это все о семантике. Нет никакой причины, по которой username или submit должны быть внутри абзаца (<p>), потому что это не абзац.

Так что я бы вместо этого использовал <div>. Хорошо, возможно <div> не имеет никакого значения вообще. Но это лучше чем <p>.

Answer 2

Я предпочитаю вариант <div>, потому что его семантика ближе к тому, что вы хотите выразить и разметить.

Тег <p> предназначен для текстовых абзацев, тогда как <div> является общим блокомлюбого вида.

Answer 3

Один вариант, который я хотел бы предложить:

Вы можете обернуть input внутри ярлыка.Таким образом, вы можете избежать дополнительных элементов.Также (если вам не нужна поддержка IE6), тогда вы можете сбросить for.И, наконец, если input - это флажок или переключатель, то он позволяет пользователю щелкнуть весь текст вместо крошечного элемента управления, как в большинстве операционных систем:

<label>Username: <input type="text" name="username" /></label>

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

Answer 4

Семантически каждая метка привязана к своему элементу управления через атрибут for. Нет необходимости оборачивать пару по семантическим причинам, хотя вы можете захотеть сделать это по стилевым причинам. Так что div уместно.

Аналогично, в группе элементов управления есть выделенный элемент fieldset, поэтому нет смысла использовать ul, ol или dl для этой цели, и их использование - просто форма списков.

Answer 5

Просто подумал, что я добавлю свои 2 цента (при условии, что мы все согласны, что смысловой разметкой является цель):

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

Если элемент управления фактически появляется в абзаце текста, это нормально - но этого практически никогда не происходит.

• Если это, например, упорядоченный список флажков, поместите их в тег <ol>.
• Если порядок не имеет значения, используйте <ul> в этом случае.
• Если это пара метка / text_input, можно утверждать, что элемент <dl> подходит
• Если это электронная таблица, используйте <table> (Да, таблицы могут быть подходящими! На самом деле, я много раз слышал (сомнительный) аргумент, что данные формы являются табличными)

_{Кстати, в HTML5 список описания считается для того, чтобы прояснить путаницу относительно значения и того, подходит ли он для вещей, отличных от буквальных терминов определения.}

Почти никто никогда не скажет, что <p> является подходящим, но очень немногие утверждают, что <div> является неуместным , потому что нет прикрепленной семантики.

Answer 6

Семантически я бы сказал, что div'ы имеют больше смысла просто потому, что они не имеют семантического значения, и единственная причина использовать контейнерный блок, как это, для целей макета. Тем не менее, я использую абзацы, но совершенно по привычке. Это единственное место, где я использую абзацы, не учитывая их смысловой смысл.

Answer 7

А как насчет полей?- это более логично для форм

И на самом деле вы можете стилизовать все, что вы хотите