Верстка форм

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

Задача

Общую конструкцию форм условно можно разделить на две группы – вертикальные и горизонтальные, или лучше – блочные и строчные.
Пример блочной формы:


Рис.1 Блочная форма

То есть имя и поле расположены каждый на своей строке.

Пример строчной формы:


Рис.3 Строчная форма

Еще:


Рис.3 Строчная форма

Задача раз – часто формы рисуются выровненные по ширине, justified, подобно табличной верстке, и строка может содержать не один label+input а несколько, например:


Рис.4 “Упакованная” форма

Задача два – как можно видеть на рисунке 3 поле поле может иметь подпись, поэтому надо для этого случая иметь соотвествующую html структуру, иначе говоря колонку, в которую можно положить инпут и подпись.

Задача три – label и input не могут иметь заданной раз и навсегда ширины, во первых потому что они могут быть разной ширины в одной форме (Рис. 4), во-вторых дизайнер может запросто нарисовать в одном сайте несколько форм с разной шириной и пропорцией этих элементов. Это неприятно но приходится для каждой формы делать разные конструкции колонок.

HTML

Для верстки строки формы я выбрал такую HTML конструкцию:

Блочная форма

<ul class="field">
	<li><label for="name"></label></li>
	<li><input type="text" id="name" /></li>
</ul>

Строчная форма

<ul class="field grid">
	<li class="col-4 field-name"><label for="pass">Password</label></li>
	<li><input type="text" placeholder="" id="pass" value="" /></li>
</ul>

Класс grid означает что мы начинаем рисовать колонки. col-4 – определяет ширину колонки.

Строчная форма “упакованная”

<ul class="field grid packed">
	<li class="col-4 field-name"><label for="pass">Password</label></li>
	<li class="col-8"><input type="text" placeholder="" id="pass" value="" /></li>
</ul>

packed – этот стиль означает что инпуты, селекты и прочее в колонке растягивается на 100%.

CSS

.grid {zoom: 1;margin:0 0 0 -2.083%;list-style:none;}
.grid:before,.grid:after {content: "";display: table;}
.grid:after {clear: both;}

.grid>[class^="col-"]{
	float: left;
	margin:0 0 0 2.083%;
}

.ie7 .grid>[class^="col-"]{
	margin:0 0 0 2.079%;
	display: inline;
}

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.col-1{ width:6.25% }
.col-2{ width:14.583% }
.col-3{ width:22.917% }
.col-4{ width:31.25% }
...

.field.packed input[type=text],
.field.packed input[type=password],
.field.packed select,
.field.packed textarea {
	width: 100%;
}
.ie7 .field.packed input[type=text],
.ie7 .field.packed input[type=password],
.ie7.field.packed select,
.ie7 .field.packed textarea {
	width: auto;
}

Я привел только стили принципиальные для построения сетки, остальное в примере.

Все плохо

  1. очень много разметки и много классов в конечном HTML
  2. плохо поддается передизайну
  3. не соответствует точно дизайну

Много разметки, много классов, и часто можно слышать критику вот таких классов – col-4.
Да, конечно, если вдруг надо этот элемент сделать другой ширины то не очень это будет удобно и легко. Но тут вся проблема в адекватном дизайне, если все формы на сайте строго вписываются в сетку то размеры сетки можно перенести в смысловые стили, field-name, field-input например. Но если формы все разные, то есть два варианта – либо так как поступил я, либо надо для каждой формы, отталкиваясь например от названия данной формы строить размеры сетки. Не знаю что лучше, оба варианта не фонтан.

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

Другая сложность это выравнивание элементов по вертикали. Ну то есть скажем инпута с именем, чекбокса с именем. Проблема сожалению упирается в багу Firefox, в котором не работает line-height для инпутов. Получается что высоту инпута приходится задавать отступами, а имени высотой строки. Можно было бы все задавать отступами, но тогда не получится добиться выравнивания если имя нужно сделать большим размером шрифта чем инпута.

Пример

пример

Работает в:

Twitter Bootstrap

Для сравнения решил посмотреть как верстают формы в твиттеровском фреймворке.


Рис.6.Bootstrap, Форма

Html фрагмент одной строки:

<div class="control-group">
	<label class="control-label" for="prependedInput">Prepended text</label>
	<div class="controls">
		<div class="input-prepend">
			<input class="span2" id="prependedInput" size="16" type="text"></div>
	</div>
</div>

.form-horizontal .control-group {
	margin-bottom: 18px;
}

.form-horizontal .control-label {
	float: left;
	width: 140px;
	padding-top: 5px;
	text-align: right;
}

.form-horizontal .controls {
	margin-left: 160px;
}

input.span2{
	width: 130px;
}

.form-horizontal – определение типа формы, у них их существует несколько.
Они рисуют двухколончатую структуру, первая колонка это control-label, вторая controls.

Не нашел примеров как верстать компоновку типа рис.4

Tags:

Комментировать