Web uygulamalarının büyük bir kısmı form işlemlerinden oluşur: kullanıcı kayıt formları, giriş formları, arama kutuları, yorum formları, iletişim formları... Formların varsayılan davranışını anlamak ve kontrol etmek, modern web geliştirmenin temel taşlarından biridir. Bu makalede form olaylarını ve preventDefault() metodunun önemini öğreneceğiz.
Formların Varsayılan Davranışı
HTML formları gönderildiğinde (submit edildiğinde), tarayıcı varsayılan olarak şunları yapar:
- Form verilerini toplar
actionattribute'undaki URL'ye gönderir- Sayfayı yeniler veya yeni sayfaya yönlendirir
html
<form action="/kayit" method="POST">
<input type="text" name="kullaniciAdi">
<input type="email" name="email">
<button type="submit">Kayıt Ol</button>
</form>Bu form gönderildiğinde, tarayıcı /kayit adresine gider ve mevcut sayfa kaybolur.
Problem: Sayfa Yenilenmesi
Birçok modern uygulamada, form gönderildiğinde sayfanın yenilenmesini istemeyiz. Bunun yerine:
- Verileri JavaScript ile işlemek
- AJAX/Fetch ile arka plana göndermek
- Sayfada kalmak ve sonucu göstermek
istiyoruz.
Örnek Senaryo
Bir yapılacaklar listesi uygulaması düşünün. Kullanıcı yeni görev yazdığında:
❌ İstenmeyen: Sayfa yenilenir, liste sıfırdan yüklenir
✅ İstenen: Sayfa aynı kalır, yeni görev listeye eklenir
preventDefault() ile Varsayılan Davranışı Engelleme
event.preventDefault() metodu, olayın varsayılan davranışını engeller. Form submit olayında kullanıldığında, sayfa yenilenmez.
javascript
const form = document.querySelector('#benimForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Sayfa yenilenmesini engelle
// Artık form verilerini JavaScript ile işleyebiliriz
console.log('Form gönderildi ama sayfa yenilenmedi!');
});Gerçek Hayat Örneği: Yapılacaklar Listesi
HTML
html
<form id="gorev-form">
<input type="text" id="gorev-input" placeholder="Yeni görev ekle...">
<button type="submit">Ekle</button>
</form>
<ul id="gorev-listesi">
<!-- Görevler buraya eklenecek -->
</ul>JavaScript
javascript
const form = document.querySelector('#gorev-form');
const input = document.querySelector('#gorev-input');
const liste = document.querySelector('#gorev-listesi');
form.addEventListener('submit', function(event) {
// Sayfanın yenilenmesini engelle
event.preventDefault();
// Input boşsa bir şey yapma
if (input.value.trim() === '') {
alert('Lütfen bir görev girin!');
return;
}
// Yeni liste öğesi oluştur
const yeniGorev = document.createElement('li');
yeniGorev.textContent = input.value;
// Silme butonu ekle
const silButonu = document.createElement('button');
silButonu.textContent = '❌';
silButonu.addEventListener('click', function() {
yeniGorev.remove();
});
yeniGorev.appendChild(silButonu);
// Listeye ekle
liste.appendChild(yeniGorev);
// Input'u temizle
input.value = '';
input.focus();
});Gerçek Hayat Örneği: Giriş Formu Doğrulama
HTML
html
<form id="giris-form">
<div class="form-grup">
<label>E-posta:</label>
<input type="email" id="email" required>
<span class="hata-mesaji"></span>
</div>
<div class="form-grup">
<label>Şifre:</label>
<input type="password" id="sifre" required>
<span class="hata-mesaji"></span>
</div>
<button type="submit">Giriş Yap</button>
</form>JavaScript
javascript
const girisForm = document.querySelector('#giris-form');
const emailInput = document.querySelector('#email');
const sifreInput = document.querySelector('#sifre');
girisForm.addEventListener('submit', function(event) {
event.preventDefault();
let hatalar = [];
// E-posta doğrulama
if (!emailInput.value.includes('@')) {
hatalar.push('Geçerli bir e-posta adresi girin');
emailInput.classList.add('hata');
} else {
emailInput.classList.remove('hata');
}
// Şifre doğrulama
if (sifreInput.value.length < 6) {
hatalar.push('Şifre en az 6 karakter olmalı');
sifreInput.classList.add('hata');
} else {
sifreInput.classList.remove('hata');
}
// Hata varsa göster
if (hatalar.length > 0) {
alert(hatalar.join('\n'));
return;
}
// Doğrulama başarılı, giriş işlemini yap
console.log('Giriş bilgileri:', {
email: emailInput.value,
sifre: sifreInput.value
});
// Burada normalde sunucuya AJAX isteği gönderilir
girisYap(emailInput.value, sifreInput.value);
});Form Verilerine Erişim
Yöntem 1: Input'ları Tek Tek Seçme
javascript
form.addEventListener('submit', function(event) {
event.preventDefault();
const ad = document.querySelector('#ad').value;
const email = document.querySelector('#email').value;
const mesaj = document.querySelector('#mesaj').value;
console.log({ ad, email, mesaj });
});Yöntem 2: FormData API Kullanma
javascript
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
// Tüm verileri obje olarak al
const veriler = Object.fromEntries(formData);
console.log(veriler);
// Veya tek tek eriş
console.log(formData.get('ad'));
console.log(formData.get('email'));
});💡 Not: FormData API'yi kullanabilmek için input'ların
nameattribute'u olmalıdır.
Gerçek Hayat Örneği: Arama Formu
Sayfa yenilenmeden arama yapma:
javascript
const aramaForm = document.querySelector('#arama-form');
const aramaInput = document.querySelector('#arama-input');
const sonuclarDiv = document.querySelector('#sonuclar');
aramaForm.addEventListener('submit', function(event) {
event.preventDefault();
const aramaMetni = aramaInput.value.trim();
if (aramaMetni === '') {
sonuclarDiv.innerHTML = '<p>Lütfen bir arama terimi girin.</p>';
return;
}
// Yükleniyor göster
sonuclarDiv.innerHTML = '<p>Aranıyor...</p>';
// API'den sonuçları getir (simüle edilmiş)
setTimeout(function() {
sonuclarDiv.innerHTML = `
<h3>"${aramaMetni}" için sonuçlar:</h3>
<ul>
<li>Sonuç 1</li>
<li>Sonuç 2</li>
<li>Sonuç 3</li>
</ul>
`;
}, 1000);
});Gerçek Hayat Örneği: Yorum Ekleme
javascript
const yorumForm = document.querySelector('#yorum-form');
const yorumInput = document.querySelector('#yorum-input');
const yorumListesi = document.querySelector('#yorum-listesi');
yorumForm.addEventListener('submit', function(event) {
event.preventDefault();
const yorumMetni = yorumInput.value.trim();
if (yorumMetni === '') {
return;
}
// Yeni yorum elementi oluştur
const yeniYorum = document.createElement('div');
yeniYorum.classList.add('yorum');
const simdi = new Date();
const tarih = simdi.toLocaleDateString('tr-TR');
const saat = simdi.toLocaleTimeString('tr-TR');
yeniYorum.innerHTML = `
<p class="yorum-metni">${yorumMetni}</p>
<span class="yorum-tarih">${tarih} ${saat}</span>
`;
// Listeye ekle (en başa)
yorumListesi.insertBefore(yeniYorum, yorumListesi.firstChild);
// Formu temizle
yorumInput.value = '';
// Başarı mesajı göster
bildirimGoster('Yorumunuz eklendi!');
});preventDefault() Başka Nerelerde Kullanılır?
1. Link Tıklamalarında
javascript
const link = document.querySelector('.ozel-link');
link.addEventListener('click', function(event) {
event.preventDefault(); // Sayfaya gitmesini engelle
// Kendi işlemimizi yap
modalAc();
});2. Sağ Tık Menüsünde
javascript
document.addEventListener('contextmenu', function(event) {
event.preventDefault(); // Varsayılan sağ tık menüsünü engelle
// Özel menü göster
ozelMenuGoster(event.clientX, event.clientY);
});3. Klavye Kısayollarında
javascript
window.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 's') {
event.preventDefault(); // Tarayıcının kaydet dialogunu engelle
// Kendi kaydetme fonksiyonumuzu çalıştır
belgeKaydet();
}
});Form Submit Tetikleme Yolları
Bir form şu şekillerde submit edilebilir:
- Submit butonuna tıklama
- Input içindeyken Enter'a basma
- JavaScript ile
form.submit()çağırma
Tüm bu yollar submit event'ini tetikler:
javascript
form.addEventListener('submit', function(event) {
event.preventDefault();
// Hangi yolla submit edilirse edilsin, burası çalışır
});Özet
Bu makalede öğrendiklerimiz:
✅ Formların varsayılan davranışı sayfa yenilemesidir
✅ event.preventDefault() bu davranışı engeller
✅ Modern uygulamalarda form verileri JavaScript ile işlenir
✅ FormData API ile form verilerine kolayca erişilebilir
✅ preventDefault() linkler, sağ tık menüsü ve klavye kısayollarında da kullanılır
Bir sonraki makalede Input ve Change Events konusunu inceleyeceğiz.
