FormData: чтение значений формы

Основная идея

FormData собирает данные формы по правилам отправляемых контролов. У поля должен быть name. Отключённые поля и неотмеченные checkbox обычно не включаются. Поэтому наличие элемента на экране не гарантирует наличие ключа в данных.

Get возвращает одно значение, getAll — все значения с одинаковым именем. Значением может быть строка или File. Преобразование через Object.fromEntries удобно, но теряет повторяющиеся ключи; не применяйте его бездумно к множественному выбору.

Пример JavaScript

const form = document.querySelector("form");
form?.addEventListener("submit", event => {
  event.preventDefault();
  const data = new FormData(form);
  const topic = data.get("topic");
  console.log(topic);
});

Пример останавливает обычную отправку и показывает поле topic в консоли. Он не отправляет сообщение и не сохраняет данные.

Частая ошибка

Самостоятельная проверка

Добавьте в учебную форму два checkbox с одним name. Сравните get и getAll и проверьте результат, когда ни один не выбран.

Код здесь показан для изучения. Встроенная песочница сайта выполняет только HTML/CSS. JavaScript проверяйте в собственном учебном файле или консоли своего тестового проекта; не вставляйте непонятный код на страницах с личными данными.

Следующие темы: fetch, обработчики событий.