Верстка веб-форм

Верстка веб-форм является одной из самых распространенных задач при создании сайта. Формы бывают простыми (типа обратной связи) и сложными (например, анкета на получение кредита). Но все формы объединяет то, что их надо сверстать, и желательно как можно проще и быстрее. Учитывая, что большинство форм состоит из одинаковых элементов, можно использовать для этого шаблон, который я привожу в конце статьи. Серверную часть (генерацию и прочее) я рассматривать не буду, статья касается только клиентской части — разметки.

Элементы формы

Большая часть веб-форм состоит из двух видов элементов: подписей и самих элементов управления (виджетов). Элементами управления могут быть текстовые поля, раскрывающиеся списки, флажки и т.д. В большинстве случаев форма представляет собой пары «подпись—элемент». Бывают и более тяжелые случаи, когда вместо одного элемента используется несколько, вида «подпись—элемент1—элемент2—элемент3». Например, выбор даты, состоящий из трех раскрывающихся списков «число, месяц, год». Часто в связках «подпись—элемент» предусматривается место для подсказки, объясняющей назначение поля.

Визуальное представление форм

Подробнее о визуальном представлении форм читайте в книге Люка Роблевски (Luke Wroblewski) «Web Form Design: Filling in the blanks»

Самыми распространенными способами представления веб-форм являются:

• Подписи слева от полей, на одном уровне
• Подписи над полями

У обоих способов есть достоинства и недостатки. Лично я предпочитаю размещать подписи на одном уровне с элементами управления (выравнивая текст подписей вправо) — на мой взгляд, это делает форму более понятной, хотя исследования показывают, что времени на заполнение в этом случае требуется чуть больше, чем в случае расположения подписей над элементами.

Способы разметки формы

Способов разметки веб-форм существует довольно много. Задача, конечно же сверстать форму с наименьшим количеством «лишних» тегов, желательно не нарушая семантики. Из самых распространенных вариантов:

Таблицы

<table>
  <tr>
    <th><label>Подпись</label></th>
    <td>Элемент</td>
  </tr>
</table>

Данный способ подходит для расположения подписей на одном уровне с элементами, но затрудняет другие возможности форматирования.

Списки (ul или ol)

<ul>
  <li>
    <label>Подпись</label>
    Элемент
  </li>
</ul>

По сути, строки формы являются списком элементов и подписей к ним, так что употребление списков вполне приемлемо. Мне в этом способе не нравится то, что для выравнивания подписей (label) на одном уровне с элементами управления необходимо назначать свойство display:block для инлайнового элемента label. Да и сам элемент управления иногда состоит из нескольких отдельных элементов (например, несколько флажков), в этом случае их приходится оборачивать в дополнительный div.

Параграфы или дивы

<p>
  <label>Подпись</label>
  Элемент
</p>

Замечания те же, что и у предыдущего способа.

Списки определений (dl)

<dl>
  <dt><label>Подпись</label></dt>
  <dd>Элемент</dd>
</dl>

Списки определений (definition list) связывают термин (dt) и определение (dd), а в нашем случае — подпись и элемент управления. Мне кажется такой способ разметки достаточно правильным с точки зрения семантики, а кроме того, он удобен в представлении — и dt и dd являются блочными элементами, что позволяет легко манипулировать ими, выстраивая горизонтально или вертикально без лишних оберток.

Достаточно прописать к форме стиль:

form dt{
  padding: 0;
  margin: 0.7em 1em 0.5em 0;
  width: 25%;
  float: left;
  clear: left;
  text-align: right;
}
form dd{
  margin: 0;
  padding: 0.5em 0;
  width: 70%;
  float: left;
  *float: none; /* hack for IE 6-7 - better to keep in separate file */
}

и наша форма выстроится в мой любимый вариант «подписи слева—элементы справа».

В данном случае пришлось использовать небольшой хак для Internet Explorer 6-7, чтобы высота обоих столбцов была синхронной (при длинных подписях). Этого можно избежать, убрав свойство float у dt, но возможно есть и другие варианты решения этой проблемы.

Шаблон формы

Ниже представлен небольшой шаблон, который я в последнее время использую для верстки форм. Он включает в себя подписи к полям, опциональные скрытые поля (наподобие, «откуда вы про нас узнали» → другое → появляется доп. текстовое поле) и некоторые другие мелочи.

Шаблон формы

Примечания к шаблону

• Работа скрываемых полей требует использования jQuery.
• Скрываемые поля работают так: каждое из них обертывается в <span class="hidden" id="...">, каждому элементу, отвечающему за показ скрытого поля (флажок или список) назначается класс hidden-trigger, а также прописывается аттрибут rel="#ID#" (где #ID# равен id скрытого элемента).
• Можно нажать кнопку «Отправить», чтобы посмотреть оформление ошибок.
• Ошибки выводятся в специальном блоке с классом error-block, каждая из них выводится в виде элемента списка с аттрибутом rel="#ERROR_ID#" (где #ERROR_ID# равен id элемента с ошибкой) — в этом случае, поля с ошибками автоматически подсвечиваются.