HTML-столбцы или строки для макета формы?

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

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

Есть два способа (возможно, больше?) достижения этого:

  • Строки. Поместите каждую метку и каждое поле слева. Поместите каждую метку и поле в поле div/container. Установите ширину метки на определенный номер. При таком подходе метки в разных формах будут иметь разную ширину, поскольку они будут зависеть от ширины текста в самой длинной метке.

  • Столбцы. Поместите все метки в один div/контейнер, который поместился слева, поместите все поля в другой плавающий левый контейнер с дополнением-левым набором. Таким образом, этикеткам и даже контейнеру этикеток не нужно устанавливать их ширину, потому что макет столбца и padding-left равномерно позаботятся о вертикальном выравнивании всех полей.

Так что подход # 2, по-видимому, проще реализовать (потому что ширины не нужно устанавливать все время), но я думаю, что это также менее объектно-ориентированное, потому что ярлык и поле, которое идет с этим ярлыком, не сгруппированы вместе, поскольку они находятся в подходе №1. Кроме того, если построение форм динамически, подход №2 также не работает с такими функциями, как addRow(label, field), поскольку он должен знать о метке и контейнерах полей, а не просто создавать/добавлять один элемент строки поля.

Какой подход, по вашему мнению, лучше? Есть ли другой, лучший подход, чем эти два?

3 ответа

Подход №1 намного лучше по ряду причин, в основном относящихся к гибкости и другим вопросам, упомянутым Кевином Буше, плюс ваши собственные точки в отношении динамического создания.

Я бы не рекомендовал не содержать элементы - даже если это возможно - вы можете отказаться от себя в качестве дополнительной силы в отношении заполнения, позиционирования и обработки переполнения. Это также делает динамическое создание более сложным.

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

Также С# 2, в то время как ваша горизонтальная компоновка ярлыков более автоматическая - вертикальная компоновка станет более ручной и сложной, учитывая, что вам нужно будет предоставить ярлыку и полевые контейнеры одинаковой высоты для выравнивания (поскольку они не могли полагаться на родителя мутанта). Я бы предположил, что у вас будет больше строк, чем столбцов, поэтому это просто добавит работу;)

CSS

.field-row {
 overflow: hidden;
}
.field-row label {
 display: block;
 width: 30%;
 float: left;
}
.field-row .field-container {
 width: 70%;
 float: left;
}

Разметка:

<div>
 <label>Label Text</label>
 <div>
 
 </div>
</div>

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

css 2:

.field-row {
 overflow: hidden;
}
.field-row .label-container {
 width: 30%;
 float: left;
}
.field-row .field-container {
 width: 70%;
 float: left;
}

разметка 2:

<div>
 <div><label>Label Text</label></div>
 <div>
 
 </div>
</div>

Просто добавив одну дополнительную оболочку, вы затем позволяете использовать более сложные ярлыки (т.е. скрывать текст и заменять изображениями или добавлять пояснительный текст с помощью js) - вы также даете себе больше контроля в отношении выравнивания по центру или по правому краю.

В любом случае, просто мои мысли:)


Ни. Сделать это с помощью CSS-содержащих divs не нужно. Например:

<form>
 <label for="first">First Name:</label>
 
 <label for="last">Last:</label>
 
</form>

http://jsfiddle.net/k4xEG/


Строки, используя только div. jsFiddle здесь: http://jsfiddle.net/v7R8j/1/

HTML:

<form>
<div>Type text:</div>


<!-- ... -->
<div>Submit button:</div>


</form>

CSS

.label {
 width: 150px;
}
.field, .label {
 float: left;
 border: 1px solid orange; 
 padding: 4px;
 margin: 4px;
}
.clear {
 clear:both; 
}

licensed under cc by-sa 3.0 with attribution.