JavaScript ile Form Elemanlarını Yönetmek

Web sayfalarında kullanıcıdan veri almanın temel yolu formlardır. JavaScript kullanarak bu verileri anlık olarak okuyabilir, kullanıcıya geri bildirim verebilir veya verileri sunucuya göndermeden önce hazırlayabilirsiniz.

Modern Yaklaşım
HTML içinde onclick veya onchange kullanmak yerine, JavaScript dosyanızda addEventListener kullanmak kodunuzu daha temiz ve yönetilebilir kılar.

1) Farklı Elemanlardan Değer Okuma

Form elemanlarının türüne göre değer alma yöntemleri küçük farklılıklar gösterir:

  • Metin Alanları: input.value
  • Seçim Kutuları: select.value
  • Onay Kutuları: checkbox.checked (True/False döner)

Kod Örneği: Form Verilerini Toplama

JavaScript Form Values Example 
// 1. Formu ve elemanları seçelim
const myForm = document.querySelector("#userForm");

myForm.addEventListener("submit", function(event) {
    // Sayfanın yenilenmesini engelleyelim
    event.preventDefault();

    // Modern Yöntem: FormData ile tüm verileri toplama
    const formData = new FormData(myForm);
    
    const ad = formData.get("username");
    const eposta = formData.get("email");
    const sozlesme = formData.get("terms"); // Checkbox

    console.log(`Kullanıcı: ${ad}, E-posta: ${eposta}, Onay: ${sozlesme ? 'Evet' : 'Hayır'}`);
});

Sık Kullanılan Form Olayları

Olay (Event) Açıklama
submit Form gönderildiğinde tetiklenir (En kritik olay).
input Kullanıcı her karakter yazdığında tetiklenir (Anlık arama için ideal).
change Eleman odağını kaybettiğinde veya seçim değiştiğinde tetiklenir.
focus / blur Elemana odaklanıldığında veya odaktan çıkıldığında çalışır.
💡 Profesyonel Öneri: Form verilerini sunucuya (PHP/Node.js) göndermeden önce mutlaka JavaScript ile bir ön kontrol yapın. Bu, hem sunucu yükünü azaltır hem de kullanıcı deneyimini iyileştirir.

Özet

  • event.preventDefault() kullanımı sayfanın gitmesini durdurmak için şarttır.
  • Çok fazla input olan formlarda new FormData(form) kullanmak işinizi çok kolaylaştırır.
  • Kullanıcıya hata mesajlarını alert yerine ilgili input'un hemen altında göstermek daha iyi bir UX sağlar.
← Önceki: Çerçeve Yapısı JS Kod Örnekleri
Sonraki Ders →
Form Doğrulama (Validation)