Özet - Formlar
Submit olayı ve doğrulama ile bir kayıt formundan veri toplayıp gösteren bir uygulama yazarsın.
Özet - Formlarla çalışmak
Bu grupta formlarla çalışmayı öğrendin. Bir forma erişmek için querySelector, alanlarını okumak için form.elements ve value özelliklerini kullandın. submit olayını preventDefault ile yakalayıp sayfa yenilenmesini engelledin.
Doğrulama için trim ile boşluğu, length ile uzunluğu denetledin. Checkbox için checked, radyo grubu için querySelectorAll ile döngü kullandın.
Doğrulama akışı
Doğrulama akışı şöyledir: önce submit olayını yakalar, preventDefault ile yenilenmeyi durdurursun. Sonra alanları form.elements ile okur, trim ile temizlersin.
form.addEventListener('submit', (event) => {
event.preventDefault();
const name = form.elements['name'].value.trim();
});Boş veya çok kısa değerlerde kullanıcıya uyarı verir, geçerli değerlerde işlemi sürdürürsün.
Uygulama Kayıt formunu işle
form değişkeni bir kayıt formunu gösteriyor. submit dinleyicisi ekle, sayfa yenilenmesini engelle. 'name' alanının değerini trim ile temizle ve boşsa 'İsim gerekli' yazdır; değilse 'Hoş geldin' yazdır. Son olarak 'agree' adlı checkbox'ı kontrol et: seçiliyse 'Onaylı' yazdır.
Örnek çözümü göster
form.addEventListener('submit', (event) => {
event.preventDefault();
const name = form.elements['name'].value.trim();
if (name === '') {
console.log('İsim gerekli');
} else {
console.log('Hoş geldin');
}
const agree = form.elements['agree'];
if (agree.checked) {
console.log('Onaylı');
}
});Kendini test et
-
Hangisi doğru bir submit dinleyici iskeletidir?
// A form.addEventListener('click', (e) => { e.preventDefault(); }); // B form.addEventListener('submit', () => { console.log('Gönder'); }); // C form.addEventListener('submit', (e) => { console.log('Tamam'); }); // D form.addEventListener('submit', (e) => { e.preventDefault(); console.log('Gönderildi'); });- A
- B
- C
- D
Cevabı göster
D — Doğru! D seçeneği submit olayını yakalar, preventDefault ile yenilenmeyi engeller ve çıktı verir.
-
Kavramları anlamlarıyla eşleştir
- form.elements
- Form alanları koleksiyonu
- event.preventDefault()
- Sayfa yenilenmesini engeller
- input.checked
- Checkbox seçili mi
-
Submit dinleyici iskeletini tamamla
form.addEventListener('submit', (event) => { event.____(); const name = form.elements['name'].value.trim(); });Cevabı göster
form.addEventListener('submit', (event) => { event.preventDefault(); const name = form.elements['name'].value.trim(); });