Başlangıç HTML form örnekleri: input, label ve validation pratikleri

Giriş: Neden doğru form yapısı önemli?

HTML formları kullanıcıdan veri almak için en sık kullanılan araçlardır. Doğru yapılandırılmış formlar daha iyi kullanıcı deneyimi, daha az giriş hatası ve geliştirilmiş erişilebilirlik sağlar. HTML5’in yerleşik doğrulama özellikleri hızlı geri bildirim verirken, ARIA öznitelikleri ekran okuyucu kullanan kişiler için erişimi iyileştirir. Bu yazıda adım adım kolay kod örnekleri ile input, label ve validation pratiklerini göreceksiniz (kaynaklar: MDN - Form validation, W3Schools - Formlar ve doğrulama).

Temel: label ve input kullanımı

Label etiketinin input ile doğru eşlenmesi, hem tıklanabilir alanı genişletir hem de ekran okuyuculara alanın ne amaçla olduğunu açıklar. İki yaygın yöntem vardır:

1) for ve id ile eşleme

Bu yöntem genellikle tercih edilir çünkü input ve label farklı yerlerde olabilir:

Örnek:

<form action="/submit" method="post">
<label for="name">Adınız</label>
<input type="text" id="name" name="name" required minlength="2" placeholder="Ahmet" />
<button type="submit">Gönder</button>
</form>

2) label ile sarmalama

Label, input’u sarmalayarak da eşlenebilir. Küçük formlar için kısa bir yöntemdir:

<label>E-posta: <input type="email" name="email" required /></label>

Her iki yöntem de erişilebilirlik açısından iyidir; önemli olan her input için uygun bir label olmasıdır. Placeholder metinleri elverişli olsa da, placeholder’ı tek başına etiket yerine kullanmayın—placeholder yardımcı bilgi içindir, etiketi değiştirmez.

HTML5 doğrulama öznitelikleri (client-side)

HTML5, form doğrulama için birçok yerleşik öznitelik sunar: required, type (ör. email, number), min, max, step, minlength, maxlength, pattern ve title. Tarayıcılar bu özniteliklere göre otomatik geri bildirim sağlar (ayrıntılar için bkz. MDN).

Örnek: farklı input tipleri ve doğrulama

Form:

<form action="/signup" method="post">
<label for="email">E-posta</label>
<input type="email" id="email" name="email" required placeholder="[email protected]" />

<label for="age">Yaş</label>
<input type="number" id="age" name="age" min="18" max="120" />

<label for="password">Parola</label>
<input type="password" id="password" name="password" required minlength="8" />
<button type="submit">Kayıt Ol</button>
</form>

pattern ile özel kurallar

pattern özniteliği basit düzenli ifadelerle (regex) girişleri kısıtlar. Örneğin 5 haneli posta kodu:

<input type="text" name="zip" pattern="[0-9]{5}" title="5 haneli posta kodu" />

Tarayıcı doğrulaması hızlı geri bildirim sağlar ancak tek başına güvenlik için yeterli değildir; her zaman sunucu tarafında da doğrulama yapın (bkz. MDN referansı).

ARIA ve erişilebilir hata mesajları

ARIA öznitelikleri ekran okuyucu etkileşimini iyileştirir. Yaygın kullanılanlar:

• aria-describedby: bir input ile açıklayıcı metni ilişkilendirmek için.
• aria-invalid: alanın şu anda geçersiz olduğunu bildirmek için (ör. aria-invalid="true").
• aria-live veya role="alert": dinamik hata mesajlarının duyurulması için.

Örnek (metin olarak gösterim):

<label for="email">E-posta</label>
<input type="email" id="email" name="email" aria-describedby="emailHelp" required />
<p id="emailHelp" aria-live="polite">Lütfen geçerli bir e-posta girin.</p>

Not: Yukarıdaki örnek id/aria ilişkisini göstermek için metin halinde verilmiştir. Dinamik hata mesajı güncellemeleri yaparken aria-live veya role="alert" kullanmak, ekran okuyucuların değişiklikleri bildirmesini sağlar (kaynak: W3Schools - erişilebilirlik).

Doğrulama akışı ve en iyi uygulamalar

Form doğrulama için önerilen adımlar:

1. Tarayıcı düzeyinde HTML5 doğrulaması ile hızlı ön geri bildirim sağlayın (required, type, pattern).
2. Özel kural gerekiyorsa istemci tarafında JavaScript ile kullanıcı deneyimini iyileştirin (ör. anında parola güçlülük göstergesi).
3. İstemcide yapılan kontrolleri sunucu tarafında tekrarlayın; istemci doğrulaması kolayca atlanabilir.
4. Hata mesajlarını açık, kısa ve erişilebilir şekilde gösterin; hangi alanın hatalı olduğu ve nasıl düzeltileceği belirtilsin.

Bu akış, hem kullanıcı deneyimini iyileştirir hem de veri kalitesini artırır. MDN dokümanları bu yaklaşımı destekler (bkz. MDN).

Pratik ipuçları ve kolay kod örnekleri

• Her input için name özniteliği: Sunucuya gönderim için gereklidir.
• label her zaman olsun: Placeholder’ı etiket yerine kullanmayın.
• inputmode: Mobilde doğru klavyeyi açmak için inputmode="numeric" gibi öznitelikler ekleyin.
• Minimum alan: Gereksiz alanları kaldırın; form doldurma hızı artar.
• Hataları satır içinde gösterin: Hangi alanda sorun olduğunu hemen gösterin ve erişilebilirlik için ARIA kullanın.
• Test edin: Farklı tarayıcılarda ve ekran okuyucularla test edin.

Tam bir örnek (metin olarak)

Aşağıdaki metin form örneği, gerçek HTML formatında sunulmuştur ve kolay kod örnekleri olarak kopyalanabilir:

<form action="/submit" method="post">
<label for="fullName">Ad Soyad</label>
<input type="text" id="fullName" name="fullName" required minlength="2" />

<label for="email">E-posta</label>
<input type="email" id="email" name="email" required aria-describedby="emailHelp" />
<p id="emailHelp" aria-live="polite">Örnek: [email protected]</p>

<label for="phone">Telefon</label>
<input type="tel" id="phone" name="phone" inputmode="tel" pattern="[0-9\-\s]{7,15}" title="Telefon numarası" />

<label for="age">Yaş</label>
<input type="number" id="age" name="age" min="18" max="120" />

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

Hızlı kontrol listesi (Checklist)

• Her input için uygun label kullanılıyor mu?
• Gereksiz alanlar kaldırıldı mı?
• HTML5 öznitelikleri (required/type/pattern) ile temel doğrulama yapılıyor mu?
• Form sonuçları sunucuda tekrar doğrulanıyor mu?
• Hata mesajları erişilebilir ve anlaşılır mı?
• Mobil için inputmode ya da uygun type kullanıldı mı?

Kaynaklar ve ileri okuma

Bu rehberin temel fikirleri ve örnekleri MDN ve W3Schools dokümanlarından alınmıştır. Daha derin teknik detay ve tarayıcı davranışları için şu sayfaları inceleyin:

• MDN - Müşteri Tarafı Form Doğrulama
• W3Schools - HTML ve CSS: Formlar ve Doğrulama

Sıkça Sorulan Sorular

Soru: HTML5 doğrulaması yeterli mi?

Cevap: HTML5 doğrulaması kullanıcı deneyimini artırır ve birçok basit hatayı önler; ancak sunucu tarafında da mutlaka doğrulama yapılmalıdır. İstemci doğrulaması kullanıcıyı hızlı bilgilendirirken, sunucudaki kontroller güvenlik ve veri bütünlüğü için gereklidir (bkz. MDN).

Soru: Label yerine placeholder kullanabilir miyim?

Cevap: Hayır. Placeholder yardımcı bilgi sağlar ama etiketin yerini almaz. Placeholder kaybolduğunda kullanıcı hangi alanın ne için olduğunu unutabilir.

Soru: ARIA her zaman gerekli mi?

Cevap: ARIA yalnızca gerekli olduğunda ve uygun şekilde kullanılmalıdır. Semantik HTML (label, fieldset, legend) önceliklidir; ARIA ise eksik semantik veya dinamik durumlar için destek sağlar (bkz. W3Schools erişilebilirlik rehberi).