Отправка формы

Отправку запускает нажатие кнопки с типом submit или клавиша Enter в текстовом поле. Перед этим браузер проверяет встроенные ограничения (required, type="email", pattern) и, если что-то не так, показывает подсказку и ничего не отправляет. Затем срабатывает событие submit, и если скрипт его не отменил, браузер формирует запрос по атрибутам формы.

Как браузер формирует запрос

• method="get" добавляет поля в адрес: /catalog/?brand=x&sort=price. Подходит для поиска и фильтров, которые удобно сохранить в закладки.
• method="post" передаёт данные в теле запроса — для заявок, заказов, регистрации. Подробнее о разнице — в статье про методы HTTP.
• Для загрузки файлов нужен enctype="multipart/form-data", иначе на сервер уйдёт только имя файла.
• Отправляются только поля с атрибутом name и не отключённые.

Отправка без перезагрузки

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const res = await fetch(form.action, {
    method: 'POST',
    body: new FormData(form),
  });
  form.replaceWith(res.ok ? 'Заявка принята' : 'Ошибка, попробуйте ещё раз');
});

Чтобы отправить форму из скрипта, используют form.requestSubmit(): он ведёт себя как нажатие кнопки — с проверкой полей и событием submit. Старый метод form.submit() пропускает и то и другое, из-за чего обработчики и валидация «внезапно» не срабатывают.

Типичные ошибки

• Кнопка без атрибута type внутри формы по умолчанию считается submit. Кнопка «Добавить ещё телефон» без type="button" отправит форму.
• Проверка только в браузере. Её легко обойти, поэтому сервер проверяет все данные заново, а в WordPress дополнительно сверяет nonce для защиты от подделки запросов.
• Ответ на POST без перенаправления. Если после успешной отправки сразу показать страницу, обновление вкладки предложит отправить данные повторно. Сервер должен ответить редиректом на страницу «Спасибо» — это шаблон Post/Redirect/Get.

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