JavaScript Form Elemanları ile Çalışmak

Web sayfalarında kullanıcıdan veri almanın en yaygın yolu formlardır. JavaScript ile form elemanlarının değerlerini okuyabilir, doğrulayabilir, kullanıcıya anlık geri bildirim verebilir ve formu güvenli biçimde gönderebilirsiniz.

1) En Basit Okuma: input değerini almak

Aşağıdaki örnekte kullanıcı adını girdikçe okuyoruz (input olayı). Ayrıca blur olayı ile alan terk edilince “son kontrol” yapıyoruz.

<form id="frmOrnek">
  <label class="form-label">Adınız</label>
  <input id="isim" name="isim" type="text" class="form-control" placeholder="Ad Soyad">

  <div id="msg" class="small mt-2 text-muted"></div>

  <button class="btn btn-primary mt-3" type="submit">Gönder</button>
</form>

const frm  = document.getElementById("frmOrnek");
const inp  = document.getElementById("isim");
const msg  = document.getElementById("msg");

// Kullanıcı yazarken (en iyi UX)
inp.addEventListener("input", () => {
  const val = inp.value.trim();
  msg.textContent = val ? `Merhaba ${val} 👋` : "Lütfen adınızı girin.";
});

// Alan terk edilince (son kontrol)
inp.addEventListener("blur", () => {
  const val = inp.value.trim();
  if (val.length < 3) {
    msg.textContent = "Ad en az 3 karakter olmalı.";
  }
});

// Form submit yakalama
frm.addEventListener("submit", (e) => {
  e.preventDefault(); // Sayfanın yenilenmesini engeller
  alert("Form yakalandı. İstersen buradan AJAX ile gönderebilirsin.");
});

2) Formdan Tüm Veriyi Toplamak: FormData

Form çok alanlıysa tek tek value almak yerine FormData ile tüm alanları rahatça okuyabilirsin.

frm.addEventListener("submit", (e) => {
  e.preventDefault();

  const fd = new FormData(frm);

  // Tek alan
  const isim = (fd.get("isim") || "").toString().trim();

  // Hepsi (debug için)
  const obj = Object.fromEntries(fd.entries());
  console.log(obj);

  if (!isim) {
    alert("İsim boş olamaz!");
    return;
  }

  alert("Gönderilecek isim: " + isim);
});

3) Sık Kullanılan Form Elemanları ve Okuma Şekilleri

// Text / Number / Email
inp.value

// Checkbox
chk.checked  // true/false

// Radio (seçili olan)
document.querySelector('input[name="cinsiyet"]:checked')?.value

// Select
sel.value

// Textarea
txt.value

4) Kullanıcıya Mesaj: alert yerine daha iyi yöntemler

alert() öğreticidir ama gerçek projelerde genelde: inline hata, toast veya modal kullanılır.

Özet

• Değer okuma: element.value, checkbox için checked
• Olay yönetimi: addEventListener ile bağla (inline event yerine)
• Submit kontrol: preventDefault() ile sayfa yenilemeyi durdur
• Toplu veri: FormData modern ve temiz yöntem
• Mesaj: alert yerine inline/toast/modal daha iyi UX