Как понять, куда отправляются данные формы при сабмите

Что проверяют

Знаете ли вы, как браузер отправляет форму без всякого JavaScript, и умеете ли определить адрес в незнакомом коде. Следом нередко спрашивают, почему поле не пришло на сервер или чем form.submit() отличается от requestSubmit().

Как отвечать

Адрес и способ отправки задают атрибуты:

• action: URL обработчика. Если атрибута нет или он пустой, форма уходит на текущий адрес документа. Относительный путь разрешается от URL страницы или от тега <base>, если он есть;
• method: по умолчанию GET, тогда данные попадают в query string. При POST они идут в теле запроса;
• enctype: для POST по умолчанию application/x-www-form-urlencoded, для файлов нужен multipart/form-data;
• target: в каком окне или фрейме откроется ответ;
• formaction, formmethod, formenctype у кнопки: переопределяют атрибуты формы для конкретной кнопки. О них забывают чаще всего.

Самый быстрый способ проверить: выполнить в консоли document.querySelector('form').action, свойство вернёт уже разрешённый абсолютный URL. Второй способ: вкладка Network в DevTools с включённым Preserve log, иначе запрос пропадёт при переходе на новую страницу. Во вкладке Payload видно, какие поля ушли.

Что попадёт в отправку: только поля с атрибутом name и без disabled, у чекбоксов и радиокнопок только отмеченные. Поле может стоять вне тега <form> и всё равно отправиться, если в его атрибуте form указан id формы.

Если обработчик submit вызывает event.preventDefault(), браузерная отправка отменяется, и адрес ищут в скрипте: fetch или XMLHttpRequest с телом new FormData(form). При передаче FormData в fetch заголовок Content-Type с boundary браузер выставит сам.

Где спотыкаются

Ставят Content-Type: multipart/form-data вручную при отправке FormData. Пропадает boundary, и сервер не может разобрать тело.

Не знают, что form.submit() не вызывает событие submit и пропускает встроенную валидацию, а requestSubmit() ведёт себя как клик по кнопке отправки.

Удивляются, почему поле не пришло, а у него нет name или стоит disabled. Для значения, которое нельзя править, но нужно отправить, есть readonly.