HTML formları derinlemesine
Doğru giriş türleri, etiketler, gruplar ve tarayıcı doğrulamasıyla kullanışlı formlar kurar, formun sunucuya nasıl gittiğini uçtan uca izlersin.
Seviye 201 · 17 ders · 15 pratik lab
Dersler
Alanlar
- Giriş türleri turu: email, tel, number, date
- Etiketler, yardım metni ve aria-describedby
- Açılır liste, datalist ve çoklu seçim
- Dosya alanları: accept, multiple ve capture
- fieldset ve legend ile gruplamak
- Kısa görev: bir randevu formunun alanları
Doğrulama
- required, pattern, min ve max
- Doğrulama iletileri ve :invalid stilleri
- Kısıt doğrulama arayüzü: setCustomValidity
- Hataları erişilebilir göstermek
- İstemci doğrulaması neden yetmez
- Kısa görev: yanlış girişleri yakalayan form
Gönderim
- GET ve POST ile gönderim farkı
- enctype ve dosya göndermek
- Formu küçük bir sunucuda karşılamak
- autocomplete belirteçleri ve parola yöneticileri
- Bitirme görevi: çok adımlı başvuru formu
Pratik lablar
- Doğru giriş türlerini seç: Rezervasyon formunda metin olarak bırakılmış e-posta, telefon, tarih ve kişi sayısı alanlarına uygun türleri ver.
- Öneri listesiyle şehir seçtir: Şehir alanına datalist ekle ve çoklu seçimli ilgi alanları listesini klavyeyle kullanılabilir yap.
- Belge yükleme alanını kısıtla: Yalnızca PDF ve JPEG kabul eden, birden çok dosyaya izin veren ve telefonda kamerayı açan yükleme alanı kur.
- Seçenekleri fieldset ile grupla: Teslimat seçeneklerini fieldset ve legend ile grupla, ekran okuyucuda nasıl okunduğunu kontrol et.
- Yardım metnini alana bağla: IBAN alanının biçim açıklamasını aria-describedby ile bağla ve okunduğunu doğrula.
- Uzun başvuruyu bölümlere ayır: Kırk alanlı burs başvurusunu mantıklı gruplara, başlıklara ve yardım metinlerine ayır.
- pattern ile posta kodunu doğrula: Beş haneli posta kodu ve plaka alanı için required ve pattern kurallarını yaz.
- Özel doğrulama mesajı ver: İki şifre alanı eşleşmediğinde setCustomValidity ile anlaşılır bir Türkçe mesaj göster.
- İstemci doğrulamasını atlatıp sunucuyu yakala: Tarayıcı doğrulamasını devre dışı bırakıp formu curl ile gönder, sunucunun kabul ettiği hatalı veriyi bul ve düzelt.
- Hata durumunu görünür yap: :invalid ve :user-invalid ile hatalı alanları kenarlık ve simgeyle belirt, yalnızca renge dayanma.
- Hata özetini ekranın başına koy: Gönderim başarısız olunca alanlara bağlantı veren bir hata özeti göster ve odağı ona taşı.
- Canlı hata duyurusu kur: Alan bazlı hataları aria-live ile duyuran ve aria-invalid durumunu doğru güncelleyen formu kur.
- GET ve POST farkını gör: Arama formunu GET, giriş formunu POST ile gönder ve verinin adreste mi gövdede mi gittiğini göster.
- Formu küçük sunucuda karşıla: Başvuru formunu alan ve dosyayı kaydeden küçük bir Python sunucusu yazıp enctype'ı doğru ayarla.
- Çok adımlı başvuruyu kur: Üç adımlı iş başvurusunu ileri-geri gezinme, adım göstergesi ve kaybolmayan verilerle tamamla.
Kurs hakkında
Doğru giriş türleri, etiketler, gruplar ve tarayıcı doğrulamasıyla kullanışlı formlar kurar, formun sunucuya nasıl gittiğini uçtan uca izlersin.
Ne öğreneceksin
Ön koşullar
Aynı yolun 101 düzeyindeki kurslarını bitirmiş olmak ya da o konuları biliyor olmak yeterlidir.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 201 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.