TimeInput

Eine Zeit in einem einzigen Feld: Stunde, Minute und im 12-Stunden-Format AM oder PM. Das Format gehört zum Produkt, nicht zum Betriebssystem des Nutzers.

Playground

<fieldset class="feitio-fieldset"><legend class="feitio-label">Wann erinnern?</legend><div class="feitio-time-field" data-hour-cycle="24"><input class="seg" inputmode="numeric" maxlength="2" value="19" aria-label="Stunde"><span class="sep" aria-hidden="true">:</span><input class="seg" inputmode="numeric" maxlength="2" value="30" aria-label="Minute"></div></fieldset>

Wann verwenden

• Für jede von der Person eingegebene Zeit: eine Erinnerung, ein Terminplan.

Wann nicht verwenden

• Für einige feste Zeiten (Morgen, Nachmittag, Abend): Radios.
• Das Zeitfeld des Browsers (type="time"): es folgt dem Format des Benutzersystems, das das Produkt nicht wählen kann, und jeder Browser stellt es unterschiedlich dar.

Beispiele

<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Quando lembrar?</legend>
  <div class="feitio-time-field" data-hour-cycle="24">
    <input class="seg" inputmode="numeric" maxlength="2" aria-label="Hora">
    <span class="sep" aria-hidden="true">:</span>
    <input class="seg" inputmode="numeric" maxlength="2" aria-label="Minuto">
    <button type="button" class="period" aria-label="AM ou PM">AM</button>
  </div>
</fieldset>

Anatomie

States

Barrierefreiheit

• Die Gruppe ist ein Fieldset mit der Frage; jeder Teil hat seinen eigenen Namen ("Stunde", "Minute", "AM oder PM").
• Der Fehler sagt aus, welcher Teil zu reparieren ist und markiert nur diesen.
• Das ganze Feld zeigt den Fokus-Rahmen.

Attribute