Правильный способ сделать перерыв между формой

Question

Выше форма. Существуют различные способы получить следующую форму выше, с вводом и текстом в разных строках.

Один должен использовать < br / >, а другой - использовать fieldset, p-tag и т. Д.

Но мне интересно, как правильно разделить разные вещи в разных линиях?

Answer 1

Самый простой способ это просто:

label, input {
    display: block;
}

<ч />

Отредактировано для добавления содержания комментария, сделанного ниже, от меня к ФП, так как оно кажется подходящим для ответа:

«Лучшее» - очень субъективная мера. «Лучший» - это просто самый простой способ достичь конечного результата, в идеале без искажения семантики HTML. Использование div элементов в формах не дает смысла содержащимся в них элементам или их связи друг с другом.

Использование fieldset дает некоторое представление об отношениях, но обычно (возможно, должно , но я не уверен) используется для группировки элементов, а не просто для их стилизации. Я бы сказал, что мой метод «лучший» просто потому, что он не требует добавления дополнительных (значимых или бессмысленных) HTML-элементов на страницу.

Answer 2

Использование <br/> тегов для управления макетом не рекомендуется.Этот тег следует использовать только для разрыва строки в абзаце.Использование его в целях верстки является ленивой и плохой практикой.

Лучший способ создания форм в целом, как описано выше, - это использование списка <ul>.

<form>
  <ul>
    <li>
      <label for="firstname">Name</label>
      <input name="firstname" type="text" />
    </li>
    <li>
      <label for="surname">Surname</label>
      <input name="surname" type="text" />
    </li>
  </ul>
</form>

Это считаетсямногие "правильные" способы сделать это.

Затем вы можете стилизовать свой список любым удобным вам способом, поэтому в зависимости от css метка может быть над или рядом с полем ввода (это где <br/> тег это испортит).

Основной стиль, который вам нужно применить:

form ul {
  list-style-type:none;
}

Это избавит от пунктов маркера в списке.Затем вы можете, например, установить элементы внутри на block или заставить их плавать.

Answer 3

Быстрых правил нет. HTML5 предпочитает использовать элемент p, см. Его пример . В старых спецификациях HTML p означает абзац, но HTML5 определяет параграф как практически любой блок встроенного содержимого.

На практике лучше всего выбирать разметку в соответствии с желаемым рендерингом по умолчанию. Если вы не предпочитаете вертикальный интервал, используйте br или div (в последнем случае вы будете заключать каждую строку в элемент div, упрощая ее при желании стиль). Если вы предпочитаете интервал (пустые строки), используйте p. Использование таблицы возможно, но в таком простом случае излишне сложно.

Answer 4

Довольно семантическим способом разметки пар метка / поле является использование списка DL (например, это используется по умолчанию в Zend_Form). Для кнопки отправки можно использовать DIV:

<dl>
    <dt><label for="frm-login-username">Username</label></dt>
    <dd><input type="text" name="username" id="frm-login-username" /></dd>

    <dt><label for="frm-login-password">Username</label></dt>
    <dd><input type="password" name="password" id="frm-login-password" /></dd>
</dl>

<div><input type="submit" value="Login" /></div>

Answer 5

В использовании br нет ничего плохого, хотя самый простой способ - просто отобразить эти элементы: block.

http://jsfiddle.net/chad/MdbKE/

Answer 6

Я бы использовал <div> теги и разместил бы их вручную с помощью CSS.Вы также можете использовать clear:both в CSS.Я использовал <br /> и раньше.Вы не хотите использовать теги <p>, потому что это может сбить с толку Google Bot, который сканирует ваш сайт, чтобы разместить вас в поиске Google, с точки зрения SEO <p> плохо, если у вас фактически нет содержимого в тегах.

Таблицы могут также выглядеть хорошим вариантом, но вот хорошая статья о том, почему вы не должны использовать таблицы для разметки http://phrogz.net/css/WhyTablesAreBadForLayout.html