Советы по использованию форм

1. Капча

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

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

Примеры капчи: «Яндекс Смарткапча» и «Гугл Рекапча».

2. Проверка на стороне сервера

Часто на стороне JavaScript делается проверка на валидацию, обязательные поля и другие данные.

Данную проверку также рекомендуется делать на стороне сервера, т.к. выполнение JavaScript можно отключить, и тогда на сервер будут отправлены некорректные данные.

Также при загрузке файлов надо проверять, что загружается корректный файл (например что это именно картинка, а не вредоносный файл). Проверять надо через MIME (у каждого файла свой MIME, например image/png).

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

3. Редирект после сохранение формы

После того как былы отправлены данные формы в POST-апросе, то рекомендуется делать перенаправление на текущую страницу, иначе при обновлении страницы, снова отправится POST-запрос.

Перенаправление рекомендуется делать с кодом «303 (See Other)».

4. Поиск через тег <search>

Если форма используется для поиска или для фильтрации, то рекомендуется оборачивать форму в тег <search>. В первую очередь данный тег полезен для скринридеров, который позволяет обозначить, что данная формы это поиск по сайту.

5. Результат в <output>

Когда результат формы надо вывести на странице (например калькулятор), то рекомендуется делать через тег <output>, который создан специально для вывода результата формы.

6. Подсказка формы

Когда надо вывести подсказку для элемента формы, например «пароль должен состоять из 8 символов», то рекомендуется использовать aria-describedby, которая указывает скринридерам, где находится подсказка.

<input type="password" aria-describedby="password-hint">
<span id="password-hint">Пароль должен состоять из 8 символов</span>