Верстка форм

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

Задача

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


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

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

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


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

Еще:


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

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


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

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

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

HTML

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

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

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

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

<ul class="field inline">
	<li><label for="pass">Password</label></li>
	<li><input type="text" placeholder="" id="pass" value="" /></li>
</ul>

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

<ul class="field inline packed">
	<li class="thirty"><label for="pass">Password</label></li>
	<li class="seventy"><input type="text" placeholder="" id="pass" value="" /></li>
</ul>

CSS

Колонки, в данном случае у нас это li, верстаю инлайн-блоками:

.field {
	padding: 0px;
	margin: 10px 0px;
	display: block;
	width: auto;
	list-style-type: none; }

.field.inline {
	letter-spacing: -.31em;
	word-spacing: -.43em; }
	.field.inline>li {
		display: inline-block;
		vertical-align: middle;
		letter-spacing: normal;
		word-spacing: normal;
	}

.packed input[type=text],
.packed input[type=password],
.packed select,
.packed textarea {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Как делаются колонки инлайновыми блоками нужно писать отдельно, но смысл понятен из кода я думаю.

Для задания ширин колонок пользую вот такую вот колбасу:

.ten{width: 10%;}
.fifteen{width: 15%;}
.twenty{width: 20%;}
.twenty-five{width: 25%;}
.thirty{width: 30%;}
.thirty-five{width: 35%;}
.forty{width: 40%;}
.forty-five{width: 45%;}
.fifty{width: 50%;}
.fifty-five{width: 55%;}
.sixty{width: 60%;}
.sixty-five{width: 65%;}
.seventy{width: 70%;}
.seventy-five{width: 75%;}
.eighty{width: 80%;}
.eighty-five{width: 85%;}
.ninety{width: 90%;}
.ninety-five{width: 95%;}
.full{width: 100%;}
.half{width: 50%;}
.third{width: 33.33%;}
.two-third{width: 66.66%;}
.quarter{width: 25%;}
.golden-small{width: 38.2%;}
.golden-big{width: 61.2%;}

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

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

Рис.5

Минусы

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

Можно было бы форме присваивать идентификатор или специфичный класс и от него строить размеры сетки, но тогда придется писать отдельные стили для разных форм.

Иногда формы верстаются при помощи dl и мотивируется это тем что разметка удобна для разделения имени (dt) и поля (dd), но на мой взгляд это не всегда удобно, это можно видеть в примерах, и верстка таких модулей не должна зависеть от разметки. Хорошо если стили написаны независимо от разметки и вы их сможете приспособить к другой верстке, например к какой нибудь дефолтной разметке какой-нибудь CMS.

Плюсы

  1. автоматизирует верстку самых разных сложных форм
  2. хорошо подходит к дизайну в котором не продумана сетка, у меня это 100% дизайна

Примеры

пример 1 пример 2 пример 3 пример 4

Работает в:

Tags:

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