Хорошая практика реализации HTML форм

Комментарий к переводу:
Стюарт Браун в своей статье подымает вопросы создания действительно удобных форм.

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

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

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

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

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

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

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

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

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

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

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

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

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

Чрезмерность проверок

Не будьте слишком настойчивы, используя проверки правильности ввода данных, используя JavaScript. Считайте, что это похоже на бархатный канат, который удерживает пользователей от любых явных ошибок, но не всегда обеспечивает это по пути наибольшего сопротивления. Помните, что пользователи могут просто отключить JavaScript (и так и есть зачастую).

Любые потенциально опасные данные (включая попытки SQL инъекций) должны исключаться на стороне сервера, это совсем не должно приниматься в рассчёт на стороне клиента. Вы должны заняться вспомогательными правками, да и то они должны быть лёгкими в работе.

Используйте <label> элементы

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

Явный (но более многословный) метод относится к использованию атрибута 'for' меток <label> - здесь вы можете установить идентификатор, к которому относится метка. Это действительно позволяет немного больше гибкости насколько допускает дизайн и ваши собственные требования для использования любого из двух вариантов меток - скрытые или явные.

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

Загрузка данных в форме

Элемент <input type="file"/> имеет весьма неполную поддержку CSS. Его стилизация возможна (пример 1 или пример 2) но исходный код избыточен и нелогичен.

Кроме того, если вы создаёте форму с загрузкой файла, не забудьте добавить для формы атрибут enctype="multipart/form-data", иначе она просто не будет работать.

И в заключение ...

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