Giriş
HTML formları, kullanıcıdan veri toplamak için temel yapılardır; doğru kullanıldığında hem kullanıcı deneyimini hem de erişilebilirliği artırır ve tarayıcı düzeyindeki doğrulama özelliklerinden faydalanır. Bu makalede temel input türlerini, HTML5 doğrulama niteliklerini ve erişilebilirlik uygulamalarını pratik örneklerle göstereceğiz. Temel referans olarak MDN Web Docs'un form ve input belgelerine bakabilirsiniz: MDN — form ve MDN — input.
Temel input türleri ve ne için kullanılmalı
<input> etiketi, farklı türlerde veri kabul etmek için çeşitli type değerleriyle kullanılır. Doğru türü seçmek kullanıcıya uygun bir klavye/arayüz sağlar ve tarayıcının basit doğrulamasından yararlanmanıza yardımcı olur (ör. email, url, number). Daha fazla bilgi için MDN giriş türleri sayfasına bakın: MDN — HTML5 input types.
-
Tek satırlık metin (text)
Genel amaçlı kısa metinler için kullanılır. Örnek: <label>Adınız: <input type="text" name="name" required></label>.
-
E-posta (email)
Tarayıcı, temel biçim doğrulaması sağlar. Örnek: <label>E-posta: <input type="email" name="email" required></label>.
-
Sayısal giriş (number)
Sayı aralıkları için min, max, step nitelikleriyle birlikte kullanılır. Örnek: <input type="number" name="age" min="0" max="120">.
-
Telefon (tel) ve URL (url)
Telefon ve web adresleri için uygun türler; tarayıcı otomatik fikirleri ve mobil klavye optimizasyonu sağlar. Örnek: <input type="tel" name="phone"> ve <input type="url" name="website">.
-
Seçimler: checkbox, radio, select, textarea
Birden fazla seçenek veya çok satırlı metin için kullanılır. Örnek: <textarea name="message" minlength="10"></textarea> ve <select>...</select>.
-
Diğer yararlı türler
date, datetime-local, time, color, range, file gibi türler kullanıcı deneyimini artırır; her tarayıcı destek seviyesi farklı olabilir.
Doğrulama: HTML nitelikleri ve tarayıcı davranışı
HTML5 ile gelen doğrulama nitelikleri, basit kuralları tarayıcı seviyesinde kontrol etmenizi sağlar. Yaygın nitelikler şunlardır: required, minlength, maxlength, pattern, min, max ve step. Örnek: <input type="password" name="pwd" minlength="8" required>.
Örnek e-posta doğrulaması (tarayıcı temel sentaks kontrolü yapar): <label>E-posta: <input type="email" name="email" required></label>.
Not: HTML nitelikleri iyi bir ilk savunma sağlar ancak tek başına yeterli değildir; sunucu tarafı doğrulama her zaman gereklidir. (Kaynak: MDN — input türleri ve doğrulama).
Erişilebilirlik (Accessibility) için en iyi uygulamalar
Erişilebilir formlar, tüm kullanıcıların (ekran okuyucu kullananlar dahil) formu anlamasını ve doldurmasını sağlar. Temel öneriler:
- Her kontrol için label kullanın. <label> etiketleri ekran okuyucular için anahtar rol oynar. Label ile input eşleştirmenin iki yolu vardır: label sarmalama ya da for + id kullanımı. (Kaynak: MDN — form erişilebilirliği).
- Gruplandırma: İlgili radio/checkbox seçeneklerini <fieldset> ve <legend> ile gruplayın.
- Hata mesajlarını erişilebilir hale getirin. Hata açıklamalarını bir öğe ile (ör. <div id="email-error">...) sağlayıp input'un aria-describedby ile ona işaret etmesini sağlayabilirsiniz. Dinamik bildirimler için role="alert" veya aria-live kullanılabilir; ARIA kullanımı dikkatle yapılmalıdır.
- Placeholder metinleri etiket yerine kullanmayın. Placeholder yardımcı metindir; etiketin yerini tutmaz.
- Autocomplete gibi nitelikler kullanıcıyı hızlandırır ve daha güvenilir giriş sağlar (ör. name, email, address-...), tarayıcıla uyumlu olarak kullanın.
Pratik örnekler
1) Basit iletişim formu
Örnek HTML (gösterim amaçlı kaçış karakterleriyle):
<form action="/contact" method="post">
<label>Adınız: <input type="text" name="name" required></label><br>
<label>E-posta: <input type="email" name="email" required></label><br>
<label>Mesaj: <textarea name="message" minlength="10" required></textarea></label><br>
<button type="submit">Gönder</button>
</form>
Açıklama: Bu yapı, label sarmalama ile açık bir eşleştirme sağlar; e-posta için tarayıcı düzeyinde temel doğrulama vardır. Sunucu tarafı doğrulama her zaman eklenmelidir.
2) Kayıt formu: şifre doğrulama ve sınırlar
Örnek (gösterim): <label>Şifre: <input type="password" name="password" minlength="8" required></label> ve <label>Şifre (tekrar): <input type="password" name="password_confirm" required></label>.
Açıklama: minlength temel kontrol sağlar; güçlü parola kontrolleri ve eşleşme kontrolü sunucu tarafında doğrulanmalıdır. İyi bir kullanıcı deneyimi için, parola gücü göstergesi ve açıklayıcı hata metinleri ekleyin.
3) Telefon numarası ve örnek pattern
Telefon için basit bir pattern örneği (ülkeye göre değişir): <input type="tel" name="phone" pattern="^\+?[0-9\s\-()]{7,}$" title="Uluslararası format (örn. +90 555 123 4567)">.
Açıklama: Telefona özel kurallar ülkeye göre farklılık gösterir; pattern kullanırken kullanıcıya örnek bir title veya yardımcı metin sunun.
Adım adım: Form oluşturma kontrol listesi
- Her giriş alanı için okunaklı bir label sağlayın.
- Doğru type kullanarak tarayıcı destekli doğrulamadan yararlanın (email, url, number, tel...).
- Kullanıcıyı yönlendiren ve erişilebilir hata mesajları ekleyin (aria-describedby, role/aria-live gerekliyse dikkatli kullanın).
- Sunucu tarafı doğrulamasını her zaman uygulayın; istemci doğrulaması kullanıcı deneyimi içindir.
- Alanları gerektiği kadar kısa tutun; gerektiğinde adım adım (multi-step) formlar düşünün.
- Autofill/Autocomplete niteliklerini kullanarak kullanıcıya hız kazandırın.
UX ve performans notları
Kısa formlar genellikle daha yüksek tamamlanma oranına sahiptir. Formu parçalara ayırmak, yüklenen bileşenleri geciktirmek ve gereksiz istemci tarafı koddan kaçınmak performansı iyileştirir. Anında doğrulama sunarken, kullanıcıyı rahatsız etmeyecek şekilde hata geri bildirimleri verin.
Sonuç
Doğru input türlerini seçmek, temel HTML5 doğrulama niteliklerinden faydalanmak ve erişilebilirlik en iyi uygulamalarını takip etmek iyi bir form deneyimi sağlar. Bu makaledeki örnekler MDN Web Docs referanslarına dayanmaktadır; uygulamada her zaman tarayıcı desteğini kontrol edin ve sunucu tarafı doğrulamayı ihmal etmeyin. (Kaynaklar: MDN — form, MDN — input, MDN — HTML5 input types).