Metin girişi

Örnekler

<div class="trds-alan">
  <label class="trds-etiket" for="ad">Adınız</label>
  <p class="trds-yardim" id="ad-yardim">Nüfus cüzdanınızda yazdığı gibi yazın.</p>
  <input class="trds-girdi" id="ad" name="ad" type="text" aria-describedby="ad-yardim" autocomplete="given-name">
</div>

<div class="trds-alan trds-alan--hata">
  <label class="trds-etiket" for="eposta">E-posta adresiniz</label>
  <p class="trds-hata" id="eposta-hata"><span class="trds-gorsel-gizli">Hata:</span> E-posta adresi bir @ işareti içermelidir.</p>
  <input class="trds-girdi trds-girdi--hata" id="eposta" name="eposta" type="email" aria-describedby="eposta-hata">
</div>

Ne zaman kullanılır

• Ad, e-posta veya başvuru numarası gibi kısa bir değer için kullanın.
• Beklenen uzunluğa göre alanı daraltın. Posta kodu alanı ad alanı kadar geniş olmaz.
• Uzun metin için çok satırlı metin alanını kullanın.

Erişilebilirlik

• Her alanın görünür bir etiketi olur. Yer tutucu metni etiket yerine geçmez.
• Yardım metnini aria-describedby ile alana bağlayın.
• Hata durumunda kenarlık 2 pikselden kalın olur ve hata metni alanın üstünde durur.
• Türkçe adlar için alan genişliğini 60 karakterden aşağı düşürmeyin.

Karşılanan WCAG 2.2 ölçütleri 1.3.11.3.53.3.13.3.24.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, JP, DK, DE, NO.