HTML Academy · Урок

API FormData

Собирайте данные формы программно с помощью интерфейса FormData

«API FormData» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое FormData

FormData — встроенный объект, представляющий поля формы и их значения; он подходит для непосредственной отправки с помощью механизмов запросов. Он обрабатывает загрузку файлов, многосоставное кодирование и произвольные пары ключ–значение без ручной сериализации.

Создание из формы

Передайте элемент <form> конструктору: const data = new FormData(formElement). Результат содержит каждый успешно обработанный элемент формы (именованные поля ввода, списки выбора, многострочные поля, отмеченные флажки и файлы). Отключённые и неотмеченные элементы исключаются автоматически.

document.forms.checkout.addEventListener("submit", async (e) => {
  e.preventDefault();
  const data = new FormData(e.target);
  await fetch("/api/checkout", { method: "POST", body: data });
});

Отправка через механизм запросов

Передача FormData в тело запроса автоматически устанавливает тип содержимого multipart/form-data с правильной границей. Не задавайте тип содержимого вручную — механизм отправки должен сформировать границу самостоятельно.

Добавление, замена и удаление

data.append(key, value) добавляет ключ, допускающий повторения. data.set(key, value) заменяет существующее значение этого ключа. data.delete(key) удаляет все значения ключа. data.has(key) проверяет наличие.

const data = new FormData();
data.append("tag", "html");
data.append("tag", "css");
console.log(data.getAll("tag")); // ["html", "css"]

Загрузка файлов

FormData прозрачно обрабатывает файлы: data.append("avatar", fileInput.files[0]). Сервер получает многосоставную загрузку с именем файла и типом MIME. Это стандартный способ загружать файлы в современном коде.

Перебор

FormData поддерживает перебор: for (const [key, value] of data) { ... }. Для конкретных вариантов перебора используйте data.entries(), data.keys() и data.values(). Это удобно для журналирования, проверки или создания копии формы в формате объектов данных.

Преобразование в формат объектов данных

Чтобы отправить данные как объекты, а не в многосоставном формате, Object.fromEntries(data) создаёт обычный объект, но теряет повторяющиеся ключи. Для корректной обработки повторов перебирайте записи и группируйте их вручную. Для интерфейсов, работающих только с объектами данных, проще сразу создать объект, не используя FormData.

Заполнение программно

Создайте пустой FormData и добавьте значения вручную: const data = new FormData(); data.append("title", title); data.append("file", file);. Это удобно при отправке данных, которые изначально не были получены из формы: файлов, перетащенных мышью, ответов интерфейсов или сформированных полезных нагрузок.

Определение кнопки отправки

Если существует несколько кнопок отправки, передайте нажатую кнопку вторым аргументом FormData: new FormData(form, e.submitter). Её имя и значение будут включены в данные — это важно для форм с несколькими действиями.

Родственный объект для параметров адреса

Для кодирования параметров формы в адресе (стандартного кодирования формы без файлов) создайте объект параметров адреса из FormData: new URLSearchParams(data). Для форм, содержащих только обычный текст, это экономнее, чем многосоставный формат.

Распространённая ошибка

Явная установка заголовка типа содержимого «multipart/form-data» нарушает загрузку: браузер больше не может добавить требуемую границу. Не указывайте тип содержимого при отправке FormData и позвольте механизму отправки обработать его самостоятельно.

Проверка знаний

Почему нельзя вручную задавать тип содержимого при отправке FormData с помощью механизма запросов?

Итоги

FormData представляет содержимое формы и корректно отправляется с помощью механизма запросов, включая загрузку файлов в многосоставном формате. Создавайте его из элемента формы, добавляйте, заменяйте и удаляйте записи, а также перебирайте их при необходимости. Не задавайте тип содержимого при отправке — граница создаётся автоматически. Для форм только с текстовыми полями используйте кодирование параметров формы в адресе.

Часто задаваемые вопросы

Урок «API FormData» бесплатный?

Да — полный текст урока «API FormData» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «API FormData»?

Собирайте данные формы программно с помощью интерфейса FormData Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «API FormData»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy