Türkiye’ye özgü form · IBAN input

IBAN girişi TR

TR ile başlayan 26 karakterlik IBAN alır, dörderli gösterir ve mod 97 sağlamasını yapar.

CSS: kararlı
JavaScript: doğrulama
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

IBAN numaranız

TR hazır yazılıdır. 24 rakam yazın. Boşluklu yapıştırabilirsiniz.

HTML kodunu göster

<div class="trds-alan" data-trds="iban">
  <label class="trds-etiket" for="iban">IBAN numaranız</label>
  <p class="trds-yardim" id="iban-yardim">TR hazır yazılıdır. 24 rakam yazın. Boşluklu yapıştırabilirsiniz.</p>
  <p class="trds-hata" data-trds-hata hidden></p>
  <input class="trds-girdi trds-girdi--iban" id="iban" name="iban" type="text"
         autocomplete="off" spellcheck="false" maxlength="32" aria-describedby="iban-yardim iban-sayac">
  <p class="trds-sayac" id="iban-sayac" data-trds-sayac aria-live="off"></p>
</div>

Ne zaman kullanılır

İade, ödeme veya maaş hesabı isterken kullanın.
Kullanıcının bankasını da gösterin. Banka kodu IBAN içinde durur.

Erişilebilirlik

TR öneki alanda hazır durur ve silinemez. İmleç önekin önüne geçmez. Yapıştırılan bir IBAN’daki TR yinelenmez.
Boşluklu yapıştırma kabul edilir ve temizlenir.
Gösterim dörderli gruplanır ama değer boşluksuz gönderilir.
Yazı tipi tek aralıklıdır, böylece rakamlar hizalanır.
Sağlama hatası "IBAN yanlış" değil "IBAN’ı kontrol edin, bir hane hatalı görünüyor" der.

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

Neden bu bileşen var

IBAN hatası para kaybına yol açar. Mod 97 sağlaması bu hatanın çoğunu form gönderilmeden yakalar. Bugün bu doğrulama her kurumda ayrı yazılıyor.

Kaynak

Bu bileşenin karşılığı hiçbir yabancı tasarım sisteminde yok.