Form · Time input

Saat girişi

Saat ve dakika için iki kısa alan. Tarih girişiyle aynı kalıp.

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

Örnekler

Temel Canlı örnek

Randevu saati

24 saat biçimi. Örnek: 14 30

Saat

Dakika

HTML kodunu göster

<fieldset class="trds-alan-grubu">
  <legend class="trds-baslik-legend">Randevu saati</legend>
  <p class="trds-yardim" id="saat-yardim">24 saat biçimi. Örnek: 14 30</p>
  <div class="trds-saat" aria-describedby="saat-yardim">
    <div class="trds-saat__parca"><label class="trds-etiket trds-etiket--kucuk" for="saat">Saat</label><input class="trds-girdi trds-girdi--2" id="saat" name="saat" type="text" inputmode="numeric" maxlength="2"></div>
    <span class="trds-saat__ayrac" aria-hidden="true">:</span>
    <div class="trds-saat__parca"><label class="trds-etiket trds-etiket--kucuk" for="dakika">Dakika</label><input class="trds-girdi trds-girdi--2" id="dakika" name="dakika" type="text" inputmode="numeric" maxlength="2"></div>
  </div>
</fieldset>

Ne zaman kullanılır

Randevu saati veya olay saati isterken kullanın.
Saat seçici açılır liste kullanmayın. Yazmak daha hızlıdır.

Erişilebilirlik

Alan grubu <fieldset> ve <legend> ile etiketlenir.
24 saat biçimi kullanılır. Yardım metni "Örnek: 14 30" der.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: FI, IT, US.