Верстка форм

Декабрь 29, 2011 ||  css , form ||  комментарии

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

Задача

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

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

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

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

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

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

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

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

Задача два – как можно видеть на рисунке 4 поле поле может иметь подпись, поэтому надо для этого случая иметь соотвествующую 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;
}

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

Все плохо

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

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

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

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

пример

Twitter Bootstrap

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

Рис.5.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

comments powered by Disqus