Примечание: ниже находится перевод тезисов доклада «Learning to Love Forms» с конференции «WebVisions 2007» (автор Aaron Gustafson). Докладчик рассказывает о верстке форм, используя корректный и эффективный XHTML/CSS-код.

  • Формы — это необходимое зло. Людям свойственно усложнять формы, хотя они могут быть представлены весьма просто.
  • Рассматривайте верстку форм как создание обычного XHTML-кода. Но будьте готовы к несоответствиям со стороны браузеров и применению хаков.
  • Разбивайте сложные формы на несколько простых частей.
  • Старайтесь обеспечивать максимальную семантическую ценность кода.
  • Не усложняйте дизайн форм.


XHTML & CSS приемы



  1. Элемент FORM создает форму.
  2. Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.
  3. По умолчанию METHOD выставляется в GET.
  4. Атрибут NAME устарел, используйте вместо него ID.
  5. Элемент FIELDSET используется для группировки связанных полей формы. Может быть вложенным.
  6. Элемент LEGEND должен использоваться, чтобы обеспечить заголовок для FIELDSET.
  7. Внутри формы можно использовать P или DIV. Если требуется обеспечить последовательность полей формы, можно воспользоваться OL (нумерованный список). Это поможет сохранить порядок расположения элементов.
  8. Элемент INPUT является стандартным полем ввода.
  9. NAME и ID. NAME используется для серверной части, ID — для клиентской. Чтобы избежать конфликтов ID, можно использовать для них значений «название формы-название поля».
  10. TEXTAREA — поле ввода с несколькими строками. Обязательные атрибуты ROWS и COLS.
  11. Элемент LABEL обес��ечивает связь текста с полем ввода. Внутренняя связь подразумевает внесение поля ввода в LABEL (можно использовать для соответствующего оформления). Внешняя связь достигается назначением для атрибута FOR у LABEL значения, равного ID у соответствующего поля ввода.
  12. Кнопки используются для обработки событий формы. Применяются элементы INPUT и BUTTON. Использование BUTTON более гибко и обеспечивает больше функций.
  13. Выставление размера шрифта в 62.5% сбрасывает размер шрифта в 10 пикселей для всех браузеров.
  14. Отображение LEGEND очень сильно варьируется от браузера к браузеру. Отступ снизу обрабатывается корректно, поля очень часто игнорируются.
  15. Устанавливайте вид курсора в указатель (pointer, прим.: input.button {cursor:hand;cursor:pointer}), чтобы обозначить возможное действие для кнопок.
  16. Вывод текста: можно использовать label:after для выставления типа после названий полей (прим. IE не поддерживает :after).
  17. Кнопки: INPUT по умолчанию отображаются как системные элементы для текущей ОС. BUTTON достаточно хорошо отображается, как блочный элемент. С помощью стилей и картинок можно добиться любого оформления. BUTTON может содержать, практически, любой элемент: P, UL и т. д. В IE при использовании нескольких кнопок они все отправляют данные одновременно. В результате, для корректной обработки нужен JavaScript для нескольких BUTTON на странице.
  18. SELECT позволяет выбрать один или несколько OPTION. Атрибут VALUE является опциональным (по умолчанию, отправляется содержание OPTION).
  19. OPTGROUP может быть использовать для группировки OPTION в SELECT. Отображается как список с отступом. OPTGROUP не может быть вложенным.
  20. Обычно ширина SELECT на 4 пикселя больше той, что вы определяете для этого элемента.
  21. Для изменения оформления у элемента SELECT можно использовать замену списков (Select Replacement). Допускается также вставка фоновых картинок (для корректной работы потребуется включенный JavaScript).
  22. FIELDSET будет хорошим решением для организации группы селективных кнопок или флажков. Используйте LEGEND для вывода вопроса или утверждения (как заголовка к такой группе). Списки UL также могут быть достойным решением. Для оформления в IE6 потребуются внутренние хаки.
  23. Выставляйте прозрачный цвет фона для селективных кнопок, чтобы избежать бага в IE (отображается серый цвет фона).
  24. Чтобы оформить названия к селективным кнопкам используйте относительное позиционирование (position:relative) и примерно 2 пикселя для верхнего отступа (padding-top:2px).
  25. LEGEND игнорирует атрибут WIDTH. Для выставления правильного размера можно использовать вложенный элемент SPAN.
  26. В формах поиска в методе лучше указывать GET, чтобы результата можно было добавить в закладки (bookmark).
  27. При указании на более, чем одно поле можно использовать LEGEND вместо LABEL.
  28. Можно убрать названия полей со страницы, сместив их сильно влево. Это позволит увеличить доступность страницы (прим.: для текстовых браузеров и других ��ользовательских агентов).
  29. Используйте атрибут CLASS для определения связей между элементами формы.
  30. LABEL может содержать более одного поля ввода.
  31. Можно использовать DD для группировки элементов формы, когда одно из полей ввода используется, как селектор верхнего уровня.
  32. Вложенные LABEL можно использовать для флажков и селективных кнопок. С помощью них можно выставить требуемую ширину.
  33. Обязательные поля ввода. Можно использовать элемент ABBR для обозначения звездочки у обязательных полей. Можно использовать всплывающую подсказку через атрибут TITLE для пояснения полей формы. ABBR игнориуется в IE6.
  34. Подсказки. Могут быть вложены в EM. С помощью CSS можно добиться перекрытия текстом подсказки поля ввода (прим.: это еще зачем? так же данные вводить неудобно).
  35. Сообщения об ошибках. Лучше обеспечить их появление максимально быстро, чтобы пользователи их заметили. Можно использовать STRONG внутри LABEL. Сообщения должны быть оформлены в виде простого текста об ошибке и способах ее исправления. Также могут содержать ссылки на то место, где прозошла ошибка (прим.: наверное, имеется в виду, в частности, перевод фокуса сразу на поле ввода, которое требуется исправить).
  36. Можно использовать JavaScript для скрытия сообщения об ошибке, как только она была исправлена.


Спасибо всем, кто ознакомился с переводом тезисов. Буду рад комментариям.

Web Optimizator: проверка скорости загрузки сайтов