Telefon girişi TR

Örnekler

<div class="trds-alan" data-trds="telefon" data-cep="zorunlu" data-zorunlu>
  <label class="trds-etiket" for="tel">Cep telefonu numaranız</label>
  <p class="trds-yardim" id="tel-yardim">Doğrulama kodu bu numaraya gönderilecek.</p>
  <p class="trds-hata" data-trds-hata hidden></p>
  <div class="trds-telefon">
    <span class="trds-telefon__kod" aria-hidden="true">+90</span>
    <input class="trds-girdi trds-girdi--10" id="tel" name="tel" type="tel"
           inputmode="tel" autocomplete="tel-national" maxlength="17" aria-describedby="tel-yardim tel-sayac">
  </div>
  <p class="trds-sayac" id="tel-sayac" data-trds-sayac aria-live="off"></p>
</div>

Ne zaman kullanılır

• Cep telefonu veya sabit hat numarası isterken kullanın.
• Doğrulama kodu gönderilecekse cep telefonu olduğunu etikette belirtin.

Erişilebilirlik

• Ülke kodu bir etikettir, girdi değildir. Kullanıcı silemez.
• Başta yazılan 0 sessizce kaldırılır. Kullanıcı 0 ile yazmaya alışkındır.
• Boşluk ve tire kabul edilir ve temizlenir. Yapıştırılan numarayı reddetmeyin.
• autocomplete="tel-national" kullanılır.

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

Neden bu bileşen var

Türk kullanıcı numarasını 0 ile yazar. Çoğu form bunu hata sayar. Bu bileşen 0 ile yazılan, boşluklu ve +90 ile yazılan biçimlerin hepsini kabul eder.

Kaynak

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