HTML Academy · Pelajaran

FormData API

Kumpulkan data formulir secara terprogram dengan antarmuka FormData.

FormData API adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu FormData

FormData adalah objek bawaan yang merepresentasikan bidang formulir dan nilainya, cocok untuk dikirim langsung melalui fetch atau XMLHttpRequest. FormData menangani pengunggahan file, pengodean multipart, dan pasangan kunci-nilai arbitrer tanpa serialisasi manual.

Membuat dari Formulir

Berikan elemen <form> ke konstruktor: const data = new FormData(formElement). Hasilnya berisi setiap kontrol formulir yang berhasil (input bernama, select, textarea, kotak centang yang dicentang, dan file). Kontrol yang dinonaktifkan dan tidak dicentang dikecualikan secara otomatis.

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

Mengirim dengan fetch

Meneruskan FormData sebagai body fetch secara otomatis menetapkan Content-Type permintaan ke multipart/form-data (dengan boundary yang tepat). Jangan menetapkan Content-Type secara manual — fetch perlu membuat boundary itu sendiri.

Menambahkan, Menetapkan, Menghapus

data.append(key, value) menambahkan kunci (duplikat diperbolehkan). data.set(key, value) mengganti nilai yang sudah ada untuk kunci tersebut. data.delete(key) menghapus semua nilai untuk suatu kunci. data.has(key) memeriksa keberadaannya.

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

Pengunggahan File

FormData menangani file secara transparan: data.append("avatar", fileInput.files[0]). Server menerima pengunggahan multipart dengan nama dan jenis MIME file tersebut. Ini adalah cara standar untuk mengunggah file dengan fetch dalam kode modern.

Melakukan Iterasi

FormData dapat diiterasi: for (const [key, value] of data) { ... }. Gunakan data.entries(), data.keys(), data.values() untuk iterasi tertentu. Ini berguna untuk logging, validasi, atau membuat salinan JSON dari formulir.

Mengonversi ke JSON

Untuk mengirim sebagai JSON, bukan multipart: Object.fromEntries(data) menghasilkan objek biasa — tetapi menghilangkan kunci duplikat. Untuk menangani duplikat dengan benar, lakukan iterasi pada entri dan kelompokkan secara manual. Untuk API JSON murni, lebih sederhana jika objek dibuat langsung tanpa melalui FormData.

Pengisian Secara Terprogram

Buat FormData kosong dan tambahkan nilai secara manual: const data = new FormData(); data.append("title", title); data.append("file", file);. Ini berguna saat mengirim data yang tidak berasal dari formulir (file yang diseret dan dilepas, respons API, atau muatan yang dibuat secara otomatis).

Mendeteksi Pengirim

Jika terdapat beberapa tombol pengiriman, teruskan pengirim sebagai argumen kedua ke FormData: new FormData(form, e.submitter). Nama dan nilai pengirim disertakan dalam data — hal ini penting untuk formulir dengan beberapa tindakan.

Kerabat URLSearchParams

Untuk pengodean application/x-www-form-urlencoded (pengodean formulir bawaan tanpa file), buat URLSearchParams dari FormData: new URLSearchParams(data). Cara ini lebih ringan daripada multipart untuk formulir yang hanya berisi teks.

Kesalahan Umum

Menetapkan header Content-Type fetch secara eksplisit ke "multipart/form-data" merusak pengunggahan — peramban tidak dapat lagi menambahkan boundary yang diperlukan. Jangan sertakan Content-Type saat mengirim FormData dan biarkan fetch menanganinya.

Uji Pengetahuan

Mengapa Anda TIDAK boleh menetapkan Content-Type secara manual saat mengirim FormData dengan fetch?

Ringkasan

FormData merepresentasikan isi formulir dan dapat dikirim dengan lancar menggunakan fetch — termasuk pengunggahan file melalui multipart/form-data. Buat dari elemen formulir, tambahkan/tetapkan/hapus entri, lalu lakukan iterasi sesuai kebutuhan. Jangan menetapkan Content-Type saat mengirim — fetch membuat boundary secara otomatis. Gunakan URLSearchParams untuk formulir urlencoded yang hanya berisi teks.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “FormData API” gratis?

Ya — teks lengkap “FormData API” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “FormData API”?

Kumpulkan data formulir secara terprogram dengan antarmuka FormData. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “FormData API” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy