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

Tarih girişi TR

Gün, ay ve yıl için üç ayrı alan verir. Türkçe gg.aa.yyyy biçimini kullanır.

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

Örnekler

Doğum tarihi Canlı örnek

Doğum tarihiniz nedir?

Örnek: 27 03 1997

Gün

Yıl

HTML kodunu göster

<fieldset class="trds-alan-grubu" data-trds="tarih">
  <legend class="trds-baslik-legend">Doğum tarihiniz nedir?</legend>
  <p class="trds-yardim" id="dt-yardim">Örnek: 27 03 1997</p>
  <div class="trds-tarih" role="group" aria-describedby="dt-yardim">
    <div class="trds-tarih__parca">
      <label class="trds-etiket trds-etiket--kucuk" for="dt-gun">Gün</label>
      <input class="trds-girdi trds-girdi--2" id="dt-gun" name="gun" type="text" inputmode="numeric" maxlength="2">
    </div>
    <div class="trds-tarih__parca">
      <label class="trds-etiket trds-etiket--kucuk" for="dt-ay">Ay</label>
      <input class="trds-girdi trds-girdi--2" id="dt-ay" name="ay" type="text" inputmode="numeric" maxlength="2">
    </div>
    <div class="trds-tarih__parca">
      <label class="trds-etiket trds-etiket--kucuk" for="dt-yil">Yıl</label>
      <input class="trds-girdi trds-girdi--4" id="dt-yil" name="yil" type="text" inputmode="numeric" maxlength="4">
    </div>
  </div>
  <p class="trds-hata" data-trds-hata hidden></p>
</fieldset>

Ne zaman kullanılır

Doğum tarihi gibi kullanıcının ezbere bildiği bir tarih için kullanın.
Randevu seçimi gibi takvim gerektiren bir tarih için takvim bileşenini kullanın.
Doğum tarihi için takvim açmayın. 60 yıl geri gitmek yavaştır.

Erişilebilirlik

Üç alan tek bir fieldset içinde durur ve legend soruyu taşır.
Her alanın kendi görünür etiketi vardır: Gün, Ay, Yıl.
Hata tek bir mesajda toplanır ve odak ilk hatalı alana gider.
Ay alanı sayı kabul eder. Ay adlarını Türkçe küçük harfle yazın: ocak, şubat.

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

Neden bu bileşen var

Biçim farkı gerçek bir hata kaynağıdır. 03.04.2026 Türkiye’de 3 Nisan, Amerika’da 4 Mart okunur. Üç ayrı alan bu belirsizliği kaldırır.

Kaynak

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