Web Профи


Советы по работе с HTML формами

Формы являются крайне необходимым, но часто неправильно понимаемым аспектом веб-дизайна. Большая часть внимания уделяется внешнему представлению форм, чем удобству их использования (usability).

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

Размещайте форму на одной странице

Обычно я избегаю растягивать формы, более, чем на одну страницу – навигация «вперёд-назад» усложняет жизнь и пользователям, и разработчикам. Это превращает такое простое действие как возврат к началу формы и коррекции данных в болезненный трал через ряд страниц.

… но, если необходимо, используйте несколько страниц

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

И что самое важное, полностью проверьте, чтобы удостовериться, что невозможно потерять любые данные, перемещаясь по страницам или выполняя проверки со стороны сервера.

По возможности минимизируйте ввод данных

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

Это особенно касается регистрационных форм – неужели необходимо собирать всю без исключения информацию о ваших пользователях во время регистрации, когда можно обойтись лишь основными данными? Достаточно оставить поля для логина, email, пароля, возможно, понадобится поле для повторного ввода пароля. Вся остальная информация будет излишней, и вы можете позволить пользователю ввести её впоследствии.

Использование AJAX в формах

Избегайте использование AJAX-контролов в формах. Если возникнут проблемы с работой таких элементов, то вы не сможете обеспечить работу приложения без потери данных (graceful degradation). И я реально не видел ни одного AJAX-контрола, действительно необходимого для использования.

Отправка формы с использованием AJAX также неразумно, если только вы не имеете дело с веб-приложениями, уже зависящими от устоявшейся структуры страницы. Итак, не используйте AJAX, если в этом нет необходимости: встроенная в браузеры по умолчанию отправка форм методом POST будет значительно более быстрой и устойчивой к ошибкам.

Смотрите статьи по теме:
Мета теги в HTML языке
Назначение Frameset в HTML языке
Html фреймы
Тег MAP AREA в HTML
Проверка HTML кода
Работа с CSS таблицами: Бегущая строка
Использование пробелов в языке HTML
Примеры использования CSS таблиц стилей
Работа со списками в HTML языке
Позиционированные списки в HTML языке
Маркированные списки в HTML языке
Навигация по HTML спискам
Цепи ссылок
Ссылки в HTML языке