JavaScript Academy · Pelajaran

Objek FormData

Buat payload multipart dari formulir.

Objek FormData adalah pelajaran JavaScript 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu FormData?

FormData adalah API peramban untuk membuat sekumpulan pasangan kunci/nilai yang mewakili kolom formulir dan nilainya. Ini adalah cara standar untuk mengemas data, termasuk berkas, agar dikirim ke server.

Data ini dikodekan sebagai multipart/form-data, yang mendukung unggahan biner.

Membuat FormData Kosong

Buat FormData kosong dan tambahkan kolom satu per satu dengan append.

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

Membuat dari Elemen Formulir

Teruskan elemen <form> ke konstruktor, dan setiap masukan bernama akan ditangkap secara otomatis. Ini adalah penggunaan yang paling umum.

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append vs set

append menambahkan nilai meskipun kuncinya sudah ada, sehingga memungkinkan beberapa nilai untuk satu kunci. set mengganti semua nilai yang ada untuk kunci tersebut.

const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));

data.set('tag', 'only');
console.log(data.getAll('tag'));

Membaca Nilai

get mengembalikan nilai pertama untuk sebuah kunci, getAll mengembalikan setiap nilai sebagai larik, dan has memeriksa keberadaannya.

const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');

console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));

Menghapus Kolom

delete menghapus semua nilai untuk sebuah kunci. Berguna untuk menghapus kolom sebelum pengiriman.

const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');

data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));

Mengiterasi Entri

FormData dapat diiterasi. Gunakan entries, keys, atau values, atau perulangan for...of, untuk menelusuri semua pasangan.

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

Menambahkan Berkas

append dapat menerima File atau Blob sebagai nilainya. Argumen ketiga opsional menetapkan nama berkas yang dikirim ke server.

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

Mengapa multipart/form-data

FormData melakukan serialisasi sebagai multipart/form-data, yang dapat membawa kolom teks dan isi berkas biner dalam satu isi permintaan. Karena itu, format ini menjadi pilihan utama untuk unggahan berkas.

const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');

console.log(data.has('photo'));

Mengonversi Menjadi Objek

Untuk formulir yang hanya berisi teks, Object.fromEntries dapat mengubah FormData menjadi objek biasa. Perhatikan bahwa cara ini hanya mempertahankan satu nilai untuk setiap kunci yang berulang.

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

Mengapa FormData Penting

FormData adalah penghubung antara formulir HTML dan permintaan jaringan. Ini mengumpulkan kolom dan berkas, mendukung kunci berulang, serta mengodekan data biner dengan aman. Selanjutnya, Anda akan membaca isi berkas dengan FileReader, lalu mengirim FormData dengan fetch.

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

Pemeriksaan Singkat

Apa perbedaan antara append dan set pada FormData?

Ringkasan: Objek FormData

Anda telah mempelajari cara mengemas data formulir:

new FormData(form) menangkap masukan bernama secara otomatis.
append memungkinkan kunci berulang; set menggantinya.
Baca dengan get, getAll, has; iterasi dengan entries.
Data dikodekan sebagai multipart/form-data, yang mendukung berkas dan data biner.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Objek FormData” gratis?

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

Apa yang akan aku pelajari di “Objek FormData”?

Buat payload multipart dari formulir. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 “Objek FormData” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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 JavaScript Academy