HTML Formları ve Yerleşik Doğrulama Öznitelikleri

Temel Web Tasarım & Kodlama üzerinde çalışırken HTML Formları ve Yerleşik Doğrulama Öznitelikleri konusunu doğru kavramak hem zaman kazandırır hem de ileride çıkabilecek sorunların önüne geçer. Aşağıda konunun özünü 6 başlık altında topladık.

Konuya genel bakış

Formlar bir web sitesinin ziyaretçiyle konuştuğu yerdir. HTML5, JavaScript yazmadan kullanılabilen doğrulama öznitelikleri getirdi: zorunlu alan, e-posta biçimi, uzunluk ve desen kontrolü tarayıcı tarafından yapılır. Bu derste erişilebilir ve kullanıcı dostu bir iletişim formunu adım adım kuruyoruz.

Adım adım

1. label ve for

Her alanı bir etiketle ilişkilendirmek ekran okuyucular ve dokunmatik ekranlar için şarttır.

2. type değerleri

email, tel, number ve date türleri mobilde doğru klavyeyi açar.

3. required, minlength, maxlength

Basit kurallar tarayıcıda anında denetlenir.

4. pattern

Telefon ya da posta kodu gibi biçimler düzenli ifadeyle tanımlanır.

5. autocomplete

Tarayıcının kayıtlı bilgileri önermesi formu doldurma süresini kısaltır.

6. Sunucu doğrulaması

Tarayıcı kontrolleri atlanabilir; aynı kuralları sunucuda da uygulayın.

HTML ile uygulama

Aşağıdaki HTML örneği, yukarıdaki noktaların gerçek bir kodda nasıl bir araya geldiğini gösteriyor:

<form action="/iletisim" method="post">
  <label for="ad">Ad Soyad</label>
  <input id="ad" name="ad" required minlength="3" autocomplete="name">

  <label for="eposta">E-posta</label>
  <input id="eposta" name="eposta" type="email" required autocomplete="email">

  <label for="telefon">Telefon</label>
  <input id="telefon" name="telefon" type="tel" pattern="0?5[0-9]{9}" placeholder="05xx xxx xx xx">

  <label for="mesaj">Mesajınız</label>
  <textarea id="mesaj" name="mesaj" required maxlength="1000"></textarea>

  <button type="submit">Gönder</button>
</form>

Kodu doğrudan kopyalamak yerine her satırın ne yaptığını anlayarak uyarlamanız, ileride çıkacak hataları çözmeyi kolaylaştırır.

Neden önemli? Kazanımlar

Kısaca özetlemek gerekirse:

• Bakımı kolay ve okunur bir kod tabanı sağlar
• Farklı cihaz ve tarayıcılarda tutarlı sonuç verir
• Ekip içinde ortak bir uygulama standardı oluşturur
• Sayfa performansını ve kullanıcı deneyimini iyileştirir

Kontrol listesi

Dersi bitirmeden önce aşağıdaki maddeleri kendi projenizde denediğinizden emin olun:

• label ve for
• type değerleri
• required, minlength, maxlength
• pattern
• autocomplete
• Sunucu doğrulaması

Sonuç

HTML Formları ve Yerleşik Doğrulama Öznitelikleri konusunda ele aldığımız 6 nokta, günlük çalışmada en sık ihtiyaç duyulan kısmı kapsıyor. Özellikle label ve for ve Sunucu doğrulaması başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• HTML5 & Semantik Yapı
• Core PHP (PDO) & MySQL Veritabanı Mimarisi
• JavaScript (ES6+) ve DOM Manipülasyonu

Bir sonraki adım için Akademi sayfasındaki diğer derslere geçebilirsiniz.