- Konu sahibi
- #1
Placeholder, giriş alanının içinde görünen geçici ipucudur; label ise alanın ne olduğunu tanımlayan kalıcı etikettir. Bu nedenle yalnızca placeholder kullanmak, formu anlaşılması, erişilebilirliği ve kullanım sonrası doldurulabilirliği açısından eksik bırakır. Doğru yaklaşım, her form alanına görünür bir
Karşılaştırmayı şöyle düşünebilirsiniz:
Bu yüzden placeholder, label'ın yerine değil, label'ın yanına kullanılmalıdır. Örneğin e-posta alanında placeholder olarak
Aşağıdaki tam HTML örneğinde iki alanın da kalıcı etiketi vardır. Placeholder yalnızca beklenen biçim hakkında ek ipucu verir.
Uygulamak için:
Etikete tıklamak alanı seçmiyorsa genellikle
Örnekteki /iletisim yalnız sunucuda sizin oluşturacağınız hedefin yer tutucusudur. HTML dosyasını açmak etiket/odak davranışını gösterir; çalışan bir POST uç noktası yoksa gerçek gönderimin kaydedildiği sonucunu beklemeyin. Placeholder da kullanıcı girdisinin yerine form verisi üretmez; gönderim alanın name/value çiftine bağlıdır.
Uzun yönergeler, biçim kuralları veya alanla ilgili önemli uyarılar için placeholder yerine alanın dışında kalıcı açıklama metni kullanın. Gerekirse bu metni
Label'ın görsel tasarımı değiştirilebilir, ancak alanın erişilebilir adı korunmalıdır. Görünür metni kaldırmak yerine tasarıma uygun biçimde konumlandırmak genellikle daha güvenlidir; yalnızca placeholder'a güvenmek doğru bir ikame değildir.
label eklemek ve gerekiyorsa placeholder'ı örnek biçiminde yardımcı metin olarak kullanmaktır.Placeholder ile label arasındaki fark
placeholder değeri, kullanıcı alana yazmaya başladığında genellikle kaybolur. Alan doldurulduktan sonra kullanıcı hangi bilginin istendiğini tekrar göremez. Ayrıca placeholder, form gönderildiğinde alanın adı olarak gönderilmez ve tek başına alanı erişilebilir biçimde tanımlamaz.label ise ilgili alanın kalıcı açıklamasıdır. for niteliği ile input öğesinin id değeri eşleştirildiğinde kullanıcı etikete tıklayarak alana odaklanabilir; yardımcı teknolojiler de alanı bu adla duyurabilir.Karşılaştırmayı şöyle düşünebilirsiniz:
| Özellik | Placeholder | Label |
|---|---|---|
| Görünürlük | Alan boşken görünür, yazınca kaybolabilir | Kalıcıdır |
| Alanı tanımlama | Geçici ipucu sağlar | Alan adını açıkça belirtir |
| Gönderilen veri | Form verisi olarak gönderilmez | Form verisi olarak gönderilmez; alanı tanımlar |
| Erişilebilirlik | Tek başına güvenilmemelidir | Alanla ilişkilendirilebilir |
Bu yüzden placeholder, label'ın yerine değil, label'ın yanına kullanılmalıdır. Örneğin e-posta alanında placeholder olarak
[email protected] yazmak biçim hakkında fikir verebilir; fakat alanın görünen adı yine E-posta adresi olmalıdır.Doğru ve çalıştırılabilir örnek
Aşağıdaki tam HTML örneğinde iki alanın da kalıcı etiketi vardır. Placeholder yalnızca beklenen biçim hakkında ek ipucu verir.
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>İletişim formu</title>
</head>
<body>
<form action="/iletisim" method="post">
<p>
<label for="name">Adınız</label>
<input id="name" name="name" type="text" placeholder="Örneğin Ayşe Yılmaz" required>
</p>
<p>
<label for="email">E-posta adresiniz</label>
<input id="email" name="email" type="email" placeholder="[email protected]" required>
</p>
<button type="submit">Gönder</button>
</form>
</body>
</html>Uygulamak için:
- Kullanıcının dolduracağı her
inputiçin benzersiz biridbelirleyin. - Bu
iddeğerini ilgililabelöğesininforniteliğinde aynen kullanın. - Sunucunun alacağı alan adını
nameniteliğinde belirtin;idilenameaynı olmak zorunda değildir. - Yalnızca biçim veya örnek gerekiyorsa
placeholderekleyin. - Dosyayı tarayıcıda açıp etiket metnine tıklayın. İmleç ilgili alana geçiyorsa
for-idbağlantısı kurulmuştur. - Bir test gönderimi yapın. Sunucu tarafında
name="name"vename="email"alanlarının alınması, formun veri gönderebildiğini gösterir.
Etikete tıklamak alanı seçmiyorsa genellikle
for değeri ile id değeri farklıdır. Alan gönderiliyor ancak sunucu beklenen anahtarı bulamıyorsa name eksik veya yanlış olabilir. Bu iki sorun, placeholder ekleyerek çözülmez.Örnekteki /iletisim yalnız sunucuda sizin oluşturacağınız hedefin yer tutucusudur. HTML dosyasını açmak etiket/odak davranışını gösterir; çalışan bir POST uç noktası yoksa gerçek gönderimin kaydedildiği sonucunu beklemeyin. Placeholder da kullanıcı girdisinin yerine form verisi üretmez; gönderim alanın name/value çiftine bağlıdır.
Sık yapılan hatalar
- Placeholder'a soru metnini yazıp görünür label eklememek: Kullanıcı yazmaya başladıktan sonra alanın amacı belirsizleşir.
- Görsel metni kontrolle ilişkilendirmemek: Bu örnekte açık ilişki için for/id eşleşmesi gerekir. Girişin label öğesinin içine yerleştirilmesiyle örtük etiketleme de mümkündür; düz bir p veya span metni kendiliğinden label olmaz.
- Örnek değeri gerçek varsayılan değer gibi kullanmak: Kullanıcının yazacağı değeri
valueile önceden doldurmak, örneğin yanlışlıkla gönderilmesine neden olabilir. - Zorunlu alanı yalnız placeholder ile belirtmek: Zorunluluk
requiredgibi HTML doğrulama araçlarıyla ve açık metinle ifade edilmelidir.
Kaynaklar
Sık sorulan sorular
Placeholder yerine açıklama metni ne zaman kullanılmalı?
Uzun yönergeler, biçim kuralları veya alanla ilgili önemli uyarılar için placeholder yerine alanın dışında kalıcı açıklama metni kullanın. Gerekirse bu metni
aria-describedby ile alana bağlayın; böylece bilgi yazı yazılınca kaybolmaz.Label görünür olmak zorunda mı?
Label'ın görsel tasarımı değiştirilebilir, ancak alanın erişilebilir adı korunmalıdır. Görünür metni kaldırmak yerine tasarıma uygun biçimde konumlandırmak genellikle daha güvenlidir; yalnızca placeholder'a güvenmek doğru bir ikame değildir.
