crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Neden preventDefault() Kullanıyoruz?
HTML formları, doğası gereği bir butona tıklandığında (submit edildiğinde) sayfayı yenileyerek veriyi belirtilen adrese göndermeye çalışır. Ancak biz modern uygulamalarda sayfanın yenilenmesini istemeyiz; veriyi arka planda işlemek veya bir API'ye göndermek isteriz.
event.preventDefault() metodu, tarayıcının bu otomatik "sayfayı yenile ve gönder" eylemini durdurur.
JavaScript:
const form = document.querySelector("#iletisim-formu");
form.addEventListener("submit", (e) => {
e.preventDefault(); // Sayfa yenilenmesini durdurduk!
console.log("Form gönderimi engellendi, JS devrede.");
});2. Form Verilerini Yakalama Yöntemleri
Formdaki verilere ulaşmanın birkaç farklı yolu vardır. Projenizin büyüklüğüne göre doğru yöntemi seçmek önemlidir.
A. Tek Tek Elemanlar Üzerinden Erişim
Eğer sadece 1-2 input varsa, doğrudan id veya name üzerinden değerleri alabilirsiniz.
JavaScript:
const adInput = document.querySelector("#isim");
const emailInput = document.querySelector("#email");
// Form submit anında:
const isim = adInput.value;
const email = emailInput.value;B. FormData Objesi (Tavsiye Edilen)
Çok sayıda input olan formlarda verileri tek tek çekmek zordur. FormData objesi, formdaki tüm verileri bir kerede bir anahtar-değer (key-value) yapısına dönüştürür.
JavaScript:
const myForm = document.querySelector("#kayit-formu");
myForm.addEventListener("submit", (e) => {
e.preventDefault();
const veriler = new FormData(myForm);
// Verileri okumak
console.log(veriler.get("kullanici_adi"));
console.log(veriler.get("sifre"));
});3. Veriyi Obje Formatına Dönüştürmek
Çoğu zaman yakaladığımız bu verileri bir API'ye (sunucuya) göndermek için JSON formatına çevirmemiz gerekir. Object.fromEntries metodu bu işlem için biçilmiş kaftandır.
JavaScript:
const formVerisi = new FormData(myForm);
const jsonVeri = Object.fromEntries(formVerisi.entries());
console.log(jsonVeri);
// Çıktı: { isim: "Ahmet", email: "[email protected]", mesaj: "Merhaba!" }4. Form Doğrulama (Validation) Örneği
Verileri yakalamadan önce, her şeyin kurallara uygun olduğunu kontrol etmek kullanıcı deneyimi için kritiktir.
JavaScript:
const loginForm = document.querySelector("#login");
loginForm.addEventListener("submit", (e) => {
e.preventDefault();
const email = loginForm.querySelector("#user-email").value;
const errorDiv = document.querySelector("#error-msg");
if (!email.includes("@")) {
errorDiv.innerText = "Lütfen geçerli bir e-posta adresi girin!";
errorDiv.style.color = "red";
} else {
errorDiv.innerText = "Giriş yapılıyor...";
// Burada Fetch API ile sunucuya gönderim yapılır
}
});Özet Karşılaştırma Tablosu
| Yöntem | Avantajı | Dezavantajı |
|---|---|---|
| Sorgu Seçici (.value) | Hızlı ve basit. | Çok inputlu formlarda kod kalabalığı yapar. |
| FormData | Otomatik veri toplama. | Dosya yükleme yoksa biraz karmaşık gelebilir. |
| Object.fromEntries | Doğrudan API uyumlu JSON üretir. | Modern tarayıcı desteği gerektirir. |
Sonuç
Form yönetimi, bir web uygulamasının kullanıcıyla el sıkıştığı andır. preventDefault() ile kontrolü ele alıp, FormData ile verileri organize ederek çok daha güvenli ve modern bir yapı kurabilirsiniz. Unutmayın, iyi bir form sadece veri toplamaz, kullanıcıyı doğru şekilde yönlendirir.