Как формы отправляют данные

Что такое HTML-форма?

HTML-форма — это структурированная область на веб-странице, которая позволяет пользователям вводить данные. Она может включать текстовые поля, чекбоксы, переключатели (radio), списки выбора, загрузку файлов и кнопки. Когда пользователь отправляет форму, браузер упаковывает данные и отправляет их по назначению, обычно на серверный эндпоинт.

Поведение формы в основном управляется атрибутами элемента <form>, особенно action, method и enctype.

Ключевые атрибуты формы

Атрибут action

Атрибут action указывает браузеру, куда отправлять данные формы. Обычно это URL, который указывает на серверный маршрут, API-эндпоинт или скрипт, обрабатывающий данные.

• Если указан action, браузер отправляет данные по этому конкретному URL.
• Если action опущен, данные отправляются на тот же URL, что и у текущей страницы.

Атрибут method

Атрибут method определяет, как браузер отправляет данные на сервер, чаще всего с использованием HTTP GET или POST.

• GET: Данные формы добавляются к URL в виде строки запроса (например, ?name=Alex&age=30). Подходит для простого поиска или фильтров, где данные не конфиденциальны.
• POST: Данные формы отправляются в теле HTTP-запроса, а не в URL. Предпочтительно для конфиденциальных данных (например, паролей) или больших объемов данных.

Другие методы HTTP (например, PUT, PATCH, DELETE) иногда используются через JavaScript или специальные настройки сервера, но нативные отправки форм обычно используют GET и POST.

Атрибут enctype

Атрибут enctype определяет, как кодируются данные формы перед отправкой. Это особенно важно при работе с загрузкой файлов или нетекстовыми данными.

• application/x-www-form-urlencoded (по умолчанию): Данные URL-кодируются как пары ключ-значение. Используется для большинства обычных форм.
• multipart/form-data: Используется, когда форма включает загрузку файлов. Текстовые поля и содержимое файлов отправляются как отдельные части в одном запросе.
• text/plain: Отправляет простой текст без кодирования; редко используется в продакшене из-за отсутствия структуры и надежности.

Как браузер формирует данные формы

Когда форма отправляется, браузер просматривает все ее отправляемые элементы управления и преобразует их в набор пар ключ-значение. Ключи определяются атрибутами name, а значения берутся из пользовательского ввода.

Роль атрибута name

В отправку включаются только поля с атрибутом name. Атрибут id не используется для отправки данных; он нужен только для связывания меток и скриптов. Например:

• Если у поля ввода есть name="email", сервер получит поле с именем email.
• Если у поля отсутствует name, его значение не будет отправлено вовсе.

Разные типы полей ввода и их значения

Различные элементы формы по-разному добавляют данные:

• Текстовые поля (text, email, password и т. д.): Значение — это то, что ввел пользователь.
• Чекбоксы: Включаются только если отмечены. Значение берется из атрибута value; если он опущен, браузер может использовать значение по умолчанию, например on.
• Переключатели (radio): Отправляется только выбранная радиокнопка из группы (с одинаковым name) со своим value.
• Списки выбора (select): Для одиночного выбора отправляется значение выбранной опции. Для множественного выбора могут быть отправлены несколько значений с одним и тем же именем.
• Поля файла: При использовании multipart/form-data двоичное содержимое загруженного файла и метаданные (например, имя файла) включаются под именем этого поля.
• Скрытые поля: Значения включаются, хотя пользователи их не видят; полезно для передачи идентификаторов, токенов или контекста.

GET и POST на практике

Когда данные попадают в URL (GET)

С method="get" браузер формирует строку запроса из данных формы и добавляет ее к URL из атрибута action. Каждая пара ключ-значение URL-кодируется и разделяется символом &.

• URL можно добавить в закладки или поделиться им, сохранив параметры фильтра или поиска.
• Существует практическое ограничение на объем данных, который удобно помещается в URL.
• Поскольку данные видны в URL, этот способ не подходит для паролей, токенов или личной информации.

Когда данные идут в тело запроса (POST)

С method="post" данные помещаются в тело HTTP-запроса. Они не видны в URL, хотя их можно увидеть в инструментах разработчика браузера или в логах.

• Подходит для больших или более сложных наборов данных, например многошаговых форм.
• Предпочтителен для действий, которые изменяют данные на сервере: создание аккаунтов, оформление заказов, отправка комментариев.
• Часто используется с multipart/form-data при обработке загрузок файлов.

Обработка данных формы на стороне сервера

После отправки данных браузером сервер получает запрос по URL, указанному в атрибуте action. Серверная программа или маршрут парсит входящие данные и предоставляет их для дальнейшей обработки.

• Для application/x-www-form-urlencoded тело запроса разбирается в словарь или ассоциативный массив ключей и значений.
• Для multipart/form-data сервер разбирает каждую часть, отделяя текстовые поля от загружаемых файлов.
• Для запросов GET строка запроса разбирается на пары ключ-значение.

После разбора приложение может валидировать ввод, взаимодействовать с базой данных, отправлять письма или возвращать ответ (HTML, JSON, перенаправления и т. п.).

Валидация и обработка ошибок

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

Проверка на стороне клиента

HTML5 предоставляет встроенные средства валидации:

• Атрибуты required гарантируют, что определенные поля не останутся пустыми.
• Типы ввода, такие как email и url, обеспечивают базовые правила форматирования.
• Атрибуты pattern, min и max задают более тонкие ограничения.

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

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

Даже если клиентская проверка проходит, сервер все равно должен валидировать входящие данные, потому что:

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

Вопросы безопасности при отправке данных формы

Всякий раз, когда данные передаются между браузером и сервером, необходимо учитывать безопасность.

Используйте HTTPS

HTTPS шифрует данные в пути следования, поэтому злоумышленники не могут легко их прочесть или изменить. Логины, платежи и личная информация всегда должны передаваться по HTTPS, но на практике все страницы должны его использовать.

Защита от CSRF

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

• CSRF-токены, встроенные в формы и проверяемые на сервере.
• Файлы cookie с атрибутом SameSite, чтобы ограничить случаи, когда браузер отправляет cookie.

Санитизация и экранирование ввода

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

• Санитизируйте ввод, чтобы удалить или нормализовать неожиданные символы.
• Экранируйте вывод при отображении данных в контекстах HTML, JavaScript или SQL, чтобы предотвратить XSS и инъекционные атаки.

Формы, JavaScript и AJAX

Традиционная отправка формы приводит к полной перезагрузке страницы, когда браузер переходит по URL из атрибута action. Современные приложения часто используют JavaScript, чтобы перехватывать отправку и отправлять данные асинхронно (AJAX).

• JavaScript может собрать те же данные формы, которые отправились бы при обычной отправке.
• Вместо перехода на другую страницу JavaScript отправляет данные с помощью API, таких как fetch или XMLHttpRequest.
• Сервер отвечает, обычно в формате JSON, и страница обновляется динамически без полной перезагрузки.

Несмотря на разницу в пользовательском опыте, базовые принципы схожи: пользовательский ввод превращается в пары ключ-значение, отправляемые по HTTP на сервер, который их интерпретирует.

Собираем все вместе

Когда пользователь взаимодействует с формой и нажимает «Отправить», происходит серия четко определенных шагов:

1. Браузер собирает значения из всех отправляемых элементов формы, имеющих имена.
2. Он кодирует эти данные в соответствии с выбранными HTTP-методом и enctype.
3. Данные отправляются на URL из атрибута action как часть HTTP-запроса.
4. Сервер разбирает входящие данные, валидирует их и выполняет логику приложения.
5. Сервер возвращает ответ, такой как новая страница, перенаправление или набор данных для клиентских скриптов.

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