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="kiris-alan">
  <label class="kiris-etiket" for="eposta2">E-posta adresiniz</label>
  <p class="kiris-yardim" id="eposta2-yardim">Başvuru sonucunu bu adrese göndereceğiz.</p>
  <input class="kiris-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.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-email-input ile başlayan sınıflar