Formlar ve Form Doğrulama Uygulamaları

Web Programcılığı stajımın beşinci haftasında, kullanıcıdan veri alma işlemlerini yani formları detaylı şekilde öğrendim. HTML ile form elemanlarını oluşturduktan sonra, JavaScript yardımıyla girilen bilgilerin doğruluğunu kontrol etmeyi öğrendim.

HTML Form Yapısı

Form yapısında kullanılan temel elemanlar şunlardır:

• <input type="text">: Metin kutusu
• <input type="email">: E-posta doğrulama
• <textarea>: Uzun metin girişleri
• <select> ve <option>: Açılır menü
• <input type="submit">: Gönder butonu

Basit Bir Form Oluşturma

<form id="iletisimFormu">
  <label>Ad Soyad:</label>
  <input type="text" id="adsoyad"><br>

  <label>E-posta:</label>
  <input type="email" id="eposta"><br>

  <label>Mesajınız:</label>
  <textarea id="mesaj"></textarea><br>

  <input type="submit" value="Gönder">
</form>

JavaScript ile Form Doğrulama

Kullanıcı formu göndermeden önce alanların dolu olup olmadığını kontrol ettim:

<script>
document.getElementById("iletisimFormu").addEventListener("submit", function(e) {
  var ad = document.getElementById("adsoyad").value;
  var mail = document.getElementById("eposta").value;
  var mesaj = document.getElementById("mesaj").value;

  if (ad === "" || mail === "" || mesaj === "") {
    alert("Lütfen tüm alanları doldurunuz.");
    e.preventDefault();
  }
});
</script>

E-Posta Formatı Kontrolü

E-postanın geçerli bir formatta olup olmadığını kontrol ettim:

var mailKontrol = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!mailKontrol.test(mail)) {
  alert("Geçerli bir e-posta adresi giriniz.");
  e.preventDefault();
}

Formda Sık Yapılan Hatalar

• Boş alan kontrolünü yapmayı unutmak
• “submit” yerine “click” event’i kullanmak
• Formun sayfayı yenilemesini engellememek (preventDefault)

Gerçek Hayattan Uygulama

Staj yaptığım kurumun web sitesi için basit bir iletişim formu oluşturdum. Bu formda ad, mail ve mesaj alanları vardı. Kullanıcı formu eksik doldurursa uyarı veriyor, her alan doluysa form başarıyla gönderiliyordu.

Genel Değerlendirme

Formlar sayesinde web sayfaları artık sadece bilgi sunan değil, kullanıcıdan veri alan etkileşimli birer araca dönüştü. Bu haftaki çalışmalarımla kullanıcı deneyimini iyileştiren yapılar oluşturabildim. JavaScript ile yapılan validasyonlar sayesinde veri giriş hatalarının önüne geçmeyi öğrendim.