Formlar Nedir ve Neden Önemlidir?
Formlar, web sayfaları üzerinde kullanıcıdan bilgi toplamanın en yaygın yoludur. Ad, soyad, e-posta, parola gibi veriler genellikle bir form aracılığıyla toplanır. JavaScript ile form işlemleri sayesinde bu verileri:
- Alabilir,
- Doğrulayabilir,
- Sunucuya göndermeden önce kontrol edebiliriz.
Bu süreç hem kullanıcı deneyimini artırır hem de hatalı girişlerin önüne geçer.
JavaScript ile Form Verilerini Almak
Aşağıdaki örnek bir form yapısını ve JavaScript ile bu formdan veri almayı göstermektedir:
HTML:
<form id="kayitFormu">
<input type="text" id="ad" name="ad" placeholder="Adınız">
<input type="email" id="email" name="email" placeholder="E-posta">
<button type="submit">Gönder</button>
</form>
JAVASCRIPT:
document.getElementById("kayitFormu").addEventListener("submit", function(e) {
e.preventDefault(); // Sayfanın yenilenmesini engeller
const ad = document.getElementById("ad").value;
const email = document.getElementById("email").value;
console.log("Ad:", ad);
console.log("Email:", email);
});
Form Doğrulama (Validation)
Kullanıcının formu eksiksiz ve doğru şekilde doldurmasını sağlamak için form doğrulama yapılmalıdır.
document.getElementById("kayitFormu").addEventListener("submit", function(e) {
e.preventDefault();
const ad = document.getElementById("ad").value.trim();
const email = document.getElementById("email").value.trim();
if (ad === "" || email === "") {
alert("Tüm alanları doldurunuz.");
return;
}
if (!email.includes("@")) {
alert("Geçerli bir e-posta adresi giriniz.");
return;
}
alert("Form başarıyla gönderildi.");
});
Formu Temizleme
Formu başarıyla gönderdikten sonra alanları temizlemek için:
document.getElementById("kayitFormu").reset();
Form Verisini Nesne Haline Getirme (İleri Seviye)
Form verisini JavaScript nesnesi olarak almak, özellikle API entegrasyonlarında çok işe yarar:
const formData = {
ad: document.getElementById("ad").value,
email: document.getElementById("email").value
};
Fetch API ile Form Verisi Gönderme
Sunucuya veri göndermek için fetch() kullanabilirsiniz:
fetch("https://api.ornek.com/gonder", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(formData)
})
.then(res => res.json())
.then(data => {
console.log("Sunucudan gelen:", data);
})
.catch(err => console.error("Hata:", err));
Ekstra: Formda Olayları Yönetmek
focus→ alan aktif olduğunda tetiklenirblur→ kullanıcı alan dışına tıkladığında tetiklenirchange→ kullanıcı veri değiştirdiğinde tetiklenir
document.getElementById("email").addEventListener("blur", function() {
console.log("E-posta alanından çıkıldı.");
});
🎯 Sonuç
JavaScript ile form işlemleri, kullanıcıdan gelen verileri doğru şekilde işlemek için kritik öneme sahiptir. Doğru şekilde yapılandırılmış form validasyonu, kullanıcı deneyimini artırırken, veri doğruluğunu da güvence altına alır. Gelişmiş projelerde bu yapı, arka uç servislerle entegre edilerek büyük sistemlerin temelini oluşturur.
