HTML Academy · Ders

FormData API'si

Form verilerini programlı olarak FormData arayüzüyle toplayın

FormData API'si, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

FormData Nedir

FormData, form alanlarını ve bunların değerlerini temsil eden, fetch veya XMLHttpRequest aracılığıyla doğrudan gönderime uygun yerleşik bir nesnedir. Dosya yüklemelerini, çok parçalı kodlamayı ve elle seri hâle getirme gerektirmeden keyfi anahtar-değer çiftlerini yönetir.

Formdan Oluşturma

Oluşturucuya bir <form> öğesi geçirin: const data = new FormData(formElement). Sonuç, başarılı form denetimlerinin tümünü (adlandırılmış girdiler, seçim alanları, metin alanları, işaretlenmiş onay kutuları, dosyalar) içerir. Devre dışı bırakılmış ve işaretlenmemiş denetimler otomatik olarak dışlanır.

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

fetch ile Gönderme

FormData'yı fetch gövdesi olarak geçirmek, isteğin Content-Type değerini multipart/form-data olarak (doğru sınırla birlikte) otomatik biçimde ayarlar. Content-Type'ı kendiniz ayarlamayın; fetch sınırı kendisi oluşturmalıdır.

Ekleme, Ayarlama, Silme

data.append(key, value) bir anahtar ekler (yinelenenlere izin verir). data.set(key, value) anahtar için mevcut değeri değiştirir. data.delete(key) bir anahtarın tüm değerlerini kaldırır. data.has(key) varlığını denetler.

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

Dosya Yüklemeleri

FormData dosyaları şeffaf biçimde yönetir: data.append("avatar", fileInput.files[0]). Sunucu, dosyanın adı ve MIME türüyle birlikte çok parçalı bir yükleme alır. Modern kodda fetch ile dosya yüklemenin standart yolu budur.

Yineleme

FormData yinelenebilirdir: for (const [key, value] of data) { ... }. Belirli yinelemeler için data.entries(), data.keys() ve data.values() kullanın. Bunlar günlük kaydı tutma, doğrulama veya formun JSON kopyasını oluşturma açısından kullanışlıdır.

JSON'a Dönüştürme

Çok parçalı veri yerine JSON olarak göndermek için Object.fromEntries(data) düz bir nesne oluşturur; ancak yinelenen anahtarları kaybeder. Yinelenen anahtarları doğru biçimde işlemek için girdileri yineleyin ve bunları elle gruplandırın. Yalnızca JSON kullanan arayüzlerde FormData'dan geçmeden nesneyi doğrudan oluşturmak daha basittir.

Program Aracılığıyla Doldurma

Boş bir FormData oluşturup değerleri elle ekleyin: const data = new FormData(); data.append("title", title); data.append("file", file);. Formdan kaynaklanmayan verileri (sürüklenip bırakılan dosyalar, API yanıtları, oluşturulan veri yükleri) gönderirken kullanışlıdır.

Gönderen Düğmesini Saptama

Birden çok gönderme düğmesi varsa göndereni FormData'ya ikinci bağımsız değişken olarak geçirin: new FormData(form, e.submitter). Gönderen düğmenin adı ve değeri verilere eklenir; bu, birden çok işlem içeren formlar için önemlidir.

URLSearchParams Benzeri

Dosya içermeyen varsayılan form kodlaması olan application/x-www-form-urlencoded kodlaması için FormData'dan bir URLSearchParams oluşturun: new URLSearchParams(data). Yalnızca düz metin içeren formlarda çok parçalı kodlamadan daha az maliyetlidir.

Yaygın Tuzak

fetch'in Content-Type üst bilgisini açıkça "multipart/form-data" olarak ayarlamak yüklemeyi bozar; tarayıcı artık gerekli sınırı ekleyemez. FormData gönderirken Content-Type'ı belirtmeyin ve bunu fetch'in yönetmesine izin verin.

Bilginizi Sınayın

FormData'yı fetch ile gönderirken Content-Type'ı neden kendiniz ayarlamamalısınız (NOT)?

Özet

FormData, form içeriğini temsil eder ve çok parçalı veri aracılığıyla yapılan dosya yüklemeleri de dahil olmak üzere fetch ile sorunsuz biçimde gönderilir. Bir form öğesinden oluşturun, girdileri gerektiğinde ekleyin, ayarlayın veya silin ve yineleyin. Gönderirken Content-Type'ı ayarlamayın; sınırı fetch otomatik olarak oluşturur. Yalnızca metin içeren URL kodlamalı formlar için URLSearchParams kullanın.

Sıkça Sorulan Sorular

“FormData API'si” dersi ücretsiz mi?

Evet — “FormData API'si” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“FormData API'si” dersinde ne öğreneceğim?

Form verilerini programlı olarak FormData arayüzüyle toplayın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“FormData API'si” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön