Basit HTML Form Örnekleri: Doğrulama ve Erişilebilirlik İpuçları

HTML formları, kullanıcıların web sayfalarıyla etkileşip veri göndermesini sağlar; doğru yapılandırıldıklarında hem kullanıcı deneyimini iyileştirir hem de verinin doğruluğunu artırır. Temel referans olarak HTML form elementi hakkında MDN belgesine bakabilirsiniz: MDN: HTML form elementi.

Temel kavramlar: action, method, input türleri

Bir formun en önemli iki özniteliği action (verinin gönderileceği URL) ve method (GET veya POST) öznitelikleridir. Input türleri (type) ise tarayıcı davranışını ve kullanıcı deneyimini değiştirir; örneğin type="email" adres doğrulaması sağlar, type="number" ise sayı girişine uygundur. input type="hidden" gibi türlerin davranışı için MDN kaynağını inceleyin: MDN: input type="hidden".

Basit iletişim formu (örnek)

Aşağıda küçük, erişilebilir ve HTML5 doğrulama özniteliklerini kullanan bir iletişim formu örneği (işlevsel HTML kodu olarak gösterilmek üzere kaçışlandırılmıştır):

<form action="/contact" method="post">
  <label for="name">Adınız</label><br>
  <input type="text" id="name" name="name" required minlength="2" maxlength="50"><br>
  <label for="email">E-posta</label><br>
  <input type="email" id="email" name="email" required aria-describedby="email-help"><br>
  <small id="email-help">E-posta adresinizi doğru yazın</small><br>
  <button type="submit">Gönder</button>
</form>

HTML5 yerleşik doğrulama (form validation)

HTML5, birçok yaygın doğrulama ihtiyacını öznitelikler aracılığıyla karşılar. Kısa bir özet:

• required: Alanın boş bırakılamayacağını belirtir.
• type: email, url, number gibi türler tarayıcı düzeyinde temel doğrulama sağlar.
• min / max / step: sayısal ve tarih girdileri için sınırlar.
• minlength / maxlength: metin uzunluğu sınırlamaları.
• pattern: Regex tabanlı özel desen doğrulamaları (kullanıcıya yardımcı olacak bir title ile birlikte verilmesi önerilir).

Bu yerleşik doğrulama kullanıcıya anında geri bildirim sunar, ancak istemci tarafı doğrulamanın tarayıcı tarafından atlanabileceğini unutmayın; bu nedenle her zaman sunucu tarafında da doğrulama yapmalısınız.

Örnek: e-posta ve özel desen

Bir e-posta alanı ve özel desen kullanan küçük örnek (kaçışlandırılmış):

<input type="email" name="user_email" required><br>
<!-- Örnek: postal kodu (ülkeye göre değişir) -->
<input type="text" name="postal" pattern="[0-9]{5}" title="5 haneli posta kodu" required>

Erişilebilirlik: ARIA ve etiket kullanımı

Erişilebilir formlar, ekran okuyucu ve klavye kullanıcıları için kritik öneme sahiptir. Temel öneriler:

• <label for="..."> kullanın; her giriş alanının görünür bir etiketi olsun. Görünür etiket yoksa aria-label kullanın.
• aria-describedby ile yardımcı metinleri bağlayın (ör. format ipuçları).
• Hata mesajlarını ekran okuyucuların fark etmesi için role="alert" veya aria-live="assertive" kullanmayı düşünün.
• Dinamik sonuçlar için HTML <output> öğesi yararlıdır; detaylar için MDN sayfası: MDN: output elementi.

Örnek (kaçışlandırılmış):

<label for="age">Yaşınız</label><br>
<input type="number" id="age" name="age" aria-describedby="age-help"><br>
<small id="age-help">18 ve üzeri olmalısınız</small>

Input type örnekleri ve notlar

• text: Genel metin girişi.
• email: Tarayıcı düzeyinde e-posta kontrolü sağlar.
• tel: Telefon için; format kontrolü sunmaz ama mobilde tuş takımını açar.
• number: min/max/step ile sayısal kontrol.
• url: URL doğrulaması.
• hidden: UI'de görünmeyen veri taşımak için kullanılır (örn. form meta verisi); MDN: input type="hidden".
• reset: Formu varsayılan değerlerine döndürür; davranışı hakkında MDN: input type="reset".

POST ve GET örnekleri

GET arama ve filtreleme gibi idempotent istekler için uygundur; tarayıcı adres çubuğuna sorgu ekler. POST ise form verilerini gizleyerek sunucuya gönderir; genellikle kayıt/güncelleme işlemleri için tercih edilir. Örnek kullanım:

<form action="/search" method="get">...</form> (arama formu)
<form action="/signup" method="post">...</form> (kayıt formu)

Kısa kontrol listesi: Yaygın iyi uygulamalar

• Her alan için görünür <label> kullanın veya aria-label ekleyin.
• Doğru type kullanın (email, tel, number vb.).
• Zorunlu alanlarda required kullanın, uzunluk için minlength/maxlength ekleyin.
• Sunucu tarafı doğrulamayı asla atlamayın; istemci doğrulaması kullanıcı deneyimini iyileştirir ama tek başına yeterli değildir.
• Hata mesajlarını erişilebilir biçimde sunun (role/aria-live).
• Formu klavye ile test edin ve ekran okuyucu ile kontrol edin.

Test ve denetleme

Tarayıcı geliştirici araçlarıyla formun gönderimini test edin, farklı input türleri ve sınır değerleri deneyin. Erişilebilirlik kontrolü için klavye ile tüm elementlere ulaşabildiğinizi doğrulayın ve ekran okuyucu ile formun mantığını kontrol edin.

Sonuç

Basit ama iyi yapılandırılmış formlar, doğrulama ve erişilebilirlik ilkeleri uygulandığında kullanıcı memnuniyetini artırır ve veri kalitesini yükseltir. HTML5’in sunduğu type ve doğrulama özniteliklerini kullanarak hızlı geri bildirim sağlayabilir; ARIA ve uygun etiketlerle erişilebilirliği güçlendirebilirsiniz. Daha fazla teknik detay ve referans için MDN sayfalarını inceleyin: form elementi, input hidden, output elementi, input reset.

Not: Bu rehber pratik uygulamalar ve örnekler sunar; güvenlik ve doğrulama için üretim uygulamalarında sunucu tarafı kontrolleri, girdi temizleme ve profesyonel güvenlik incelemeleri yapılması önerilir.