HTML Academy · Lekcja

FormData API

Programowe zbieranie danych formularza za pomocą interfejsu FormData

FormData API to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym jest FormData

FormData to wbudowany obiekt reprezentujący pola formularza i ich wartości, odpowiedni do bezpośredniego wysyłania za pomocą fetch lub XMLHttpRequest. Obsługuje przesyłanie plików, kodowanie multipart oraz dowolne pary klucz-wartość bez konieczności ręcznej serializacji.

Tworzenie na podstawie formularza

Przekaż element <form> do konstruktora: const data = new FormData(formElement). Wynik zawiera każdy pomyślnie przesłany element formularza (nazwane pola input, elementy select, pola textarea, zaznaczone pola wyboru i pliki). Wyłączone i niezaznaczone elementy są automatycznie pomijane.

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

Wysyłanie za pomocą fetch

Przekazanie FormData jako body funkcji fetch automatycznie ustawia Content-Type żądania na multipart/form-data (z właściwym boundary). Nie ustawiaj Content-Type ręcznie — fetch musi sam wygenerować boundary.

Append, Set, Delete

data.append(key, value) dodaje klucz (dopuszczając duplikaty). data.set(key, value) zastępuje każdą istniejącą wartość tego klucza. data.delete(key) usuwa wszystkie wartości danego klucza. data.has(key) sprawdza, czy klucz istnieje.

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

Przesyłanie plików

FormData w przejrzysty sposób obsługuje pliki: data.append("avatar", fileInput.files[0]). Serwer otrzymuje przesyłanie multipart z nazwą pliku i jego typem MIME. To standardowy sposób przesyłania plików za pomocą fetch we współczesnym kodzie.

Iterowanie

FormData jest obiektem iterowalnym: for (const [key, value] of data) { ... }. Do określonych rodzajów iteracji używaj data.entries(), data.keys() i data.values(). Jest to przydatne podczas rejestrowania, walidacji lub tworzenia kopii formularza w formacie JSON.

Konwersja do JSON

Aby wysłać dane jako JSON zamiast multipart: Object.fromEntries(data) tworzy zwykły obiekt — ale gubi zduplikowane klucze. Aby prawidłowo obsłużyć duplikaty, iteruj po wpisach i grupuj je ręcznie. W przypadku interfejsów API opartych wyłącznie na JSON-ie łatwiej jest utworzyć obiekt bezpośrednio, bez używania FormData.

Programowe wypełnianie

Utwórz pusty obiekt FormData i ręcznie dodaj wartości: const data = new FormData(); data.append("title", title); data.append("file", file);. Jest to przydatne podczas wysyłania danych, które nie pochodzą z formularza (plików przeciągniętych i upuszczonych, odpowiedzi API, wygenerowanych danych).

Wykrywanie elementu wysyłającego

Jeśli istnieje wiele przycisków wysyłania, przekaż element wysyłający jako drugi argument do FormData: new FormData(form, e.submitter). Nazwa i wartość elementu wysyłającego zostaną uwzględnione w danych — jest to ważne w formularzach z wieloma akcjami.

Pokrewny URLSearchParams

W przypadku kodowania application/x-www-form-urlencoded (domyślnego kodowania formularzy bez plików) utwórz URLSearchParams na podstawie FormData: new URLSearchParams(data). Jest to rozwiązanie tańsze niż multipart dla formularzy zawierających wyłącznie tekst.

Typowa pułapka

Jawne ustawienie nagłówka Content-Type funkcji fetch na "multipart/form-data" psuje przesyłanie — przeglądarka nie może już dodać wymaganego boundary. Pomiń Content-Type podczas wysyłania FormData i pozwól, aby fetch obsłużył go samodzielnie.

Sprawdzenie wiedzy

Dlaczego NIE należy ręcznie ustawiać Content-Type podczas wysyłania FormData za pomocą fetch?

Podsumowanie

FormData reprezentuje zawartość formularza i umożliwia wygodne wysyłanie za pomocą fetch — w tym przesyłanie plików przez multipart/form-data. Twórz go na podstawie elementu formularza, dodawaj, ustawiaj i usuwaj wpisy oraz iteruj po nich w razie potrzeby. Nie ustawiaj Content-Type podczas wysyłania — fetch automatycznie wygeneruje boundary. Używaj URLSearchParams dla formularzy urlencoded zawierających wyłącznie tekst.

Często zadawane pytania

Czy lekcja „FormData API” jest bezpłatna?

Tak — pełny tekst „FormData API” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „FormData API”?

Programowe zbieranie danych formularza za pomocą interfejsu FormData Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „FormData API”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy