Дейв Руперт собрал список качеств, которыми, по его мнению, обладают хорошие формы. Я в целом согласен с этим списком и привожу тут его адаптацию:
- Хорошие формы работают без клиентского JavaScript
- Хорошие формы всегда отправляются
- Хорошие формы запоминают значения и показывают сообщения об ошибках
- Хорошие формы логина взаимодействуют с менеджерами паролей
- Хорошие формы используют элемент
<form>- Хорошие формы используют подходящие типы полей
- Хорошие формы имеют понятные подписи для полей и кнопок
- Хорошие формы имеют состояние
:focus- В хороших формах логичная последовательность табуляции
- Хорошие формы позволяют вставлять данные из буфера обмена
- Элементы хороших форм используют атрибут
inputmode- Элементы хороших форм используют атрибут
autocomplete- В хороших формах поиска элемент
<form> вложен внутрь элемента <search>- Хорошие формы можно сбрасывать с помощью
<button type="reset">- Хорошие формы работают с
formData- Хорошие формы не используют
placeholder в качестве подписи- Хорошие формы работают на мобильных телефонах
- Хорошие формы не всплывают и не запрашивают персональные данные
- Хорошие формы не слишком большие и спрашивают только о самом необходимом
- Хорошие формы используют HTTPS
- Хорошие формы используют подходящие методы HTTP
- Хорошие формы проверяются на клиенте и на сервере
- Хорошие формы проверены с помощью скринридера перед отправкой в прод
- В хороших формах четко обозначены обязательные поля
- Хорошие формы предупреждают о деструктивных и дорогостоящих действиях
- Хорошие формы заставляют младенца Иисуса улыбаться (ориг. make the baby Jesus smile)
- Хорошие формы аутентификации используют сгенерированный сервером одноразовый код nonce
- Хорошие формы проверяют состояние сети при помощи
navigator.onLine перед отправкой- Хорошие формы используют
accent-color для стилизации, если этого достаточно- В хороших формах пользовательские элементы управления не приветствуются и должны быть удалены при первой возможности
Формы — это важно. Через формы пользователи заказывают товары, оформляют подписки на сервисы, входят в личные кабинеты, отправляют свои данные и делают много других действий. Поэтому стоит уделять формам особе внимание. Этот список можно использовать как чеклист для проверки форм.