Отправка формы: method, action, FormData

Что происходит после нажатия «Отправить»: куда уходят данные, как они кодируются и какие кнопки этим управляют.

Отправка формы — это превращение значений полей в пары «имя = значение» и передача их на сервер по адресу action методом method (GET или POST) в выбранной кодировке enctype.

Форма красиво заполнена и проверена — но что дальше? Понимание механики отправки объясняет, почему данные иногда видны в адресной строке, почему файл «не дошёл», и что значит «name» у поля. Эти знания одинаково нужны и для серверной обработки, и для отправки формы из JavaScript.

Зачем это знать на практике

• Корректная передача данных. Без понимания method/action/name поля просто «не приходят» на сервер.
• Загрузка файлов. Без правильного enctype файл не отправится — частый источник «загадочных» багов.
• Связь с JS. Объект FormData позволяет читать и отправлять форму скриптом, и опирается ровно на эти же правила.

name и value: из чего состоит отправка

На сервер уходит набор пар имя=значение. Имя берётся из атрибута name поля, значение — из того, что в нём введено. Поле без name не отправляется вообще — это правило номер один.

<form action="/subscribe" method="post">
  <label>Имя <input name="username"></label>
  <label>Почта <input name="email" type="email"></label>
  <button>Подписаться</button>
</form>

Если ввести «Анна» и «[email protected]», на сервер придёт username=Анна&[email protected]. Атрибут id на отправку не влияет — он для label и CSS; за передачу отвечает только name. Несколько полей с одинаковым name (например, чекбоксы) отправят несколько значений с этим именем.

method: GET или POST

Атрибут method определяет способ передачи. Разница принципиальна.

Правило выбора простое: GET — когда запрос только читает и его не стыдно показать в URL (строка поиска, фильтры каталога — такую ссылку удобно скопировать). POST — когда запрос меняет состояние или содержит чувствительные/объёмные данные (регистрация, оплата, загрузка файла). Пароль в GET-запросе попадёт в адресную строку, историю и логи — так делать нельзя.

<!-- GET: параметры окажутся в URL: /search?q=html&sort=new -->
<form action="/search" method="get">
  <input name="q">
  <select name="sort">
    <option value="new">Сначала новые</option>
    <option value="top">Популярные</option>
  </select>
  <button>Искать</button>
</form>

action: куда отправлять

Атрибут action — это URL обработчика. Если его опустить, форма отправится на текущий адрес страницы. Путь может быть относительным (/subscribe) или абсолютным (https://api.site.com/subscribe).

enctype: кодировка тела (и почему файлы особенные)

Для POST атрибут enctype задаёт, как закодировано тело запроса. Значений три, но на практике важны два:

• application/x-www-form-urlencoded — по умолчанию. Пары склеиваются как a=1&b=2, спецсимволы экранируются. Подходит для обычных текстовых полей.
• multipart/form-data — обязательно для файлов. Тело делится на части, каждая со своими заголовками; так можно передать бинарное содержимое файла рядом с текстовыми полями.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label>Аватар <input type="file" name="avatar"></label>
  <label>Подпись <input name="caption"></label>
  <button>Загрузить</button>
</form>

Запомните намертво: есть type="file" — значит, нужны method="post" и enctype="multipart/form-data". Без этого файл не уедет — придёт только его имя или вовсе ничего. Это самая частая причина «почему загрузка не работает».

Кнопки: submit и reset

Внутри формы кнопки имеют тип по умолчанию submit:

<button type="submit">Отправить</button>
<button type="reset">Очистить</button>
<button type="button">Просто кнопка (для JS)</button>

• type="submit" (или просто <button> в форме) — отправляет форму.
• type="reset" — сбрасывает поля к начальным значениям. Применяйте осторожно: пользователи случайно стирают всё.
• type="button" — ничего не отправляет; нужна, когда кнопкой управляет скрипт (иначе по умолчанию она бы сабмитила форму — частый сюрприз).

У кнопки submit могут быть свои name и value — тогда сервер узнает, какой именно кнопкой отправили (удобно для «Сохранить» против «Опубликовать»).

Как это работает под капотом: FormData

Когда вы жмёте submit, браузер сам собирает значения в пары и отправляет. Ровно тот же процесс доступен из JavaScript через объект FormData — он читает поля формы по их name:

// демонстрация логики FormData (упрощённо, без реальной формы)
const data = new Map();
data.set("username", "Анна");
data.set("email", "[email protected]");

const pairs = [...data].map(([k, v]) => `${k}=${v}`);
console.log(pairs.join("&"));

Вывод:

username=Анна&[email protected]

Настоящий код выглядит как const data = new FormData(formElement) — и дальше data можно отправить через fetch(url, { method: "POST", body: data }). Важно: FormData автоматически выставляет правильный multipart-формат, когда в форме есть файлы, — поэтому при отправке через fetch заголовок Content-Type вручную ставить не нужно. Так связываются «ванильные» HTML-формы и современный JS: одни и те же name, одни и те же пары.

Частые ошибки

• Поле без name. Оно не попадёт в отправку, как бы красиво ни выглядело. Нет name — нет данных.
• Файл без multipart/form-data. С кодировкой по умолчанию файл не передаётся. Нужны и method="post", и правильный enctype.
• Пароль или приватные данные через GET. Они окажутся в URL, истории браузера и логах сервера. Для такого — только POST.
• Кнопка без type внутри формы. По умолчанию это submit: обычная «кнопка для JS» неожиданно отправит форму. Ставьте type="button".
• Путать id и name. На сервер уходит name; id нужен только для label и стилей.

Итоги

• Отправляются пары name=value; поле без name не передаётся, id на отправку не влияет.
• GET кладёт данные в URL (поиск, фильтры — можно сохранить ссылку); POST — в тело (изменения, пароли, файлы).
• action — адрес обработчика (по умолчанию текущая страница).
• Для файлов обязательны method="post" и enctype="multipart/form-data".
• Кнопки: submit отправляет, reset сбрасывает, button — для скрипта. В JS форму читает и шлёт FormData по тем же name.