Form · Email input

E-posta girişi

E-posta adresi için tek satırlık alan. Telefonda @ tuşlu klavye açılır.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

E-posta adresiniz

Başvuru sonucunu bu adrese göndereceğiz.

HTML kodunu göster

<div class="trds-alan">
  <label class="trds-etiket" for="eposta2">E-posta adresiniz</label>
  <p class="trds-yardim" id="eposta2-yardim">Başvuru sonucunu bu adrese göndereceğiz.</p>
  <input class="trds-girdi" id="eposta2" name="eposta" type="email" autocomplete="email" spellcheck="false" aria-describedby="eposta2-yardim">
</div>

Ne zaman kullanılır

Kullanıcıya e-posta ile döneceğiniz her formda kullanın.
Doğrulama gerekiyorsa adresi ikinci kez yazdırmayın. Onay kodu gönderin.

Erişilebilirlik

type="email" ve autocomplete="email" kullanılır. Tarayıcı doğru klavyeyi ve öneriyi getirir.
Büyük harf ve boşluk sunucuda temizlenir. Kullanıcı yazdığı için hata almaz.
spellcheck="false" ile tarayıcı adresin altını çizmez.

Karşılanan WCAG 2.2 ölçütleri 1.3.5 3.3.1 3.3.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: DE.