<input>-Elemente vom Typtime erstellen Eingabefelder, um dem Benutzer das einfache Eingeben einer Uhrzeit (Stunden und Minuten und optional Sekunden) zu ermöglichen.

Obwohl das Erscheinungsbild der Benutzeroberfläche des Steuerelements von Browser und Betriebssystem abhängt, bleiben die Funktionen gleich. Der Wert ist immer eine im 24-Stunden-Format angegebene ZeitHH:mm oderHH:mm:ss mit führenden Nullen, unabhängig vom Eingabeformat der Benutzeroberfläche.

Probieren Sie es aus

<label for="appointment">Choose a time for your meeting:</label><input  type="time"   name="appointment"  min="09:00"  max="18:00"  required /><small>Office hours are 9am to 6pm</small>

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

Zusätzliche Attribute

Zusätzlich zu den gemeinsamen Attributen aller<input>-Elemente bietentime-Eingaben die folgenden Attribute.

list

Der Wert des list-Attributs ist dieid eines im selben Dokument befindlichen<datalist>-Elements. Die<datalist> bietet eine Liste vordefinierter Werte als Vorschläge für den Benutzer dieser Eingabe. Werte in der Liste, die mit demtype nicht kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die angegebenen Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

max

Ein String, der die späteste akzeptierte Zeit angibt, angegeben im gleichenZeitwertformat wie oben beschrieben. Wenn der angegebene String keine gültige Zeit ist, wird kein Maximalwert festgelegt.

min

Ein String, der die frühest akzeptierte Zeit angibt, angegeben im zuvor beschriebenenZeitwertformat. Wenn der angegebene Wert kein gültiger Zeitstring ist, wird kein Minimalwert festgelegt.

readonly

Ein Boolean-Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Seinvalue kann jedoch weiterhin durch direktes Setzen dervalue-Eigenschaft desHTMLInputElement via JavaScript geändert werden.

step

Dasstep-Attribut ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder der spezielle Wertany, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten von der Schrittgrundlage entfernt sind, sind gültig. Die Schrittgrundlage istmin, falls angegeben, ansonstenvalue oder0 (00:00:00), falls keines von beiden angegeben ist.

Fürtime-Eingaben wird der Wert vonstep in Sekunden angegeben und wie eine Anzahl von Millisekunden behandelt, die demstep-Wert mal 1000 entspricht (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 60, was 1 Minute bedeutet.

Ein String-Wert vonany bedeutet, dass kein Stepping impliziert wird und jeder Wert zulässig ist (vorbehaltlich anderer Einschränkungen wiemin undmax). In der Praxis hat es beitime-Eingaben den gleichen Effekt wie60, da die Picker-Benutzeroberfläche in diesem Fall nur das Auswählen ganzer Minuten ermöglicht.

Validierung

Standardmäßig wendet<input type="time"> keine Validierung auf die eingegebenen Werte an, außer dass die Benutzeroberfläche des Benutzeragenten Ihnen im Allgemeinen nicht erlaubt, etwas anderes als einen Zeitwert einzugeben. Dies ist hilfreich, aber Sie können nicht vollständig darauf vertrauen, dass der Wert ein gültiger Zeitstring ist, da er möglicherweise ein leerer String ("") ist, was zulässig ist. Für Beispiele zur Constraint-Validierung unter Verwendung der Attributemin,max,step undrequired siehe den AbschnittHöchst- und Mindestzeiten festlegen.

Beispiele

Grundlegende Verwendung von Zeit

Die grundlegendste Verwendung von<input type="time"> umfasst eine einfache Kombination aus einem<input>- und einem<label>-Element, wie unten gezeigt:

<form>  <label for="appointment-time">Choose an appointment time: </label>  <input type="time" name="appointment-time" /></form>

Erstellen einer Zeit-Picker-Benutzeroberfläche

In diesem Beispiel erstellen wir ein Schnittstellenelement zur Zeitauswahl unter Verwendung des nativen Pickers, der mit<input type="time"> erstellt wird:

<form>  <label for="appointment-time">    Choose an appointment time (opening hours 12:00 to 18:00):  </label>  <input       type="time"    name="appointment-time"    min="12:00"    max="18:00"    required />  <span></span></form>

input[type="time"] {  width: 100px;}input + span {  padding-right: 30px;}input:invalid + span::after {  position: absolute;  content: "✖";  padding-left: 5px;}input:valid + span::after {  position: absolute;  content: "✓";  padding-left: 5px;}

Steuereingabegröße

<input type="time"> unterstützt keine Formgrößenattribute wiesize, da Zeiten immer ungefähr dieselbe Anzahl von Zeichen haben. Sie müssen aufCSS für Größenanforderungen zurückgreifen.

Das Wert-Attribut setzen

Sie können einen Standardwert für die Eingabe festlegen, indem Sie beim Erstellen des<input>-Elements einen gültigen Zeitpunkt imvalue Attribut angeben:

<label for="appointment-time">Choose an appointment time: </label><input   type="time"  name="appointment-time"  value="13:30" />

Den Wert mit JavaScript festlegen

Sie können den Zeitwert auch in JavaScript über dievalue-Eigenschaft desHTMLInputElement abrufen und festlegen, zum Beispiel:

const timeControl = document.querySelector('input[type="time"]');timeControl.value = "15:30";

Zeitwertformat

Dervalue dertime-Eingabe ist immer im 24-Stunden-Format mit führenden Nullen:HH:mm, unabhängig vom Eingabeformat, das wahrscheinlich basierend auf der Benutzerlokalisierung (oder durch den Benutzeragenten) ausgewählt wird. Falls die Zeit Sekunden einschließt (sieheVerwendung des step-Attributs), ist das Format immerHH:mm:ss. Weitere Informationen über das Format des von diesem Eingabetyp verwendeten Zeitwertes finden Sie inZeitstrings.

In diesem Beispiel können Sie den Wert der Zeiteingabe sehen, indem Sie eine Zeit eingeben und beobachten, wie er sich danach ändert.

Zuerst ein Blick auf das HTML. Wir fügen ein Label und eine Eingabe hinzu und fügen ein<p>-Element mit einem<span> hinzu, um den Wert dertime-Eingabe anzuzeigen:

<form>  <label for="startTime">Start time: </label>  <input type="time" />  <p>    Value of the <code>time</code> input:    <code>"<span>n/a</span>"</code>.  </p></form>

Der JavaScript-Code fügt der Zeiteingabe Code hinzu, um auf dasinput Ereignis zu lauschen, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Eingabeelements ändert. Wenn dies geschieht, werden die Inhalte des<span> mit dem neuen Wert des Eingabeelements ersetzt.

const startTime = document.getElementById("startTime");const valueSpan = document.getElementById("value");startTime.addEventListener("input", () => {  valueSpan.innerText = startTime.value;});

Wenn ein Formular mit einertime-Eingabe übermittelt wird, wird der Wert kodiert, bevor er in die Formulardaten aufgenommen wird. Der Eintritt in die Formulardaten für eine Zeiteingabe wird immer in der Formname=HH%3Amm odername=HH%3Amm%3Ass sein, falls Sekunden eingeschlossen sind (sieheVerwendung des step-Attributs).

Verwendung des step-Attributs

Sie können dasstep Attribut verwenden, um die Menge der Zeit zu variieren, die vorwärts oder rückwärts gesprungen wird, wann immer die Zeit erhöht oder verringert wird (zum Beispiel, damit sich die Zeit in 10-Minuten-Schritten bewegt, wenn Sie die kleinen Pfeilsymbole anklicken).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, die Sie inkrementieren möchten; der Standardwert ist 60 Sekunden. Mit diesem als Standard zeigen die meisten Benutzeragenten-Oberflächen Stunden und Minuten, aber keine Sekunden an. Die Einbeziehung desstep Attributs mit einem beliebigen numerischen Wert, der nicht durch60 teilbar ist, fügt Sekunden in die Benutzeroberfläche ein, es sei denn, dermin- odermax-Wert hat nicht bereits dafür gesorgt, dass die Sekunden sichtbar sind.

<form>  <label for="appointment-time">Choose an appointment time: </label>  <input type="time" name="appointment-time" step="2" /></form>

Um Minuten oder Stunden als Schritt anzugeben, geben Sie die Anzahl der Minuten oder Stunden in Sekunden an, wie z.B. 120 für 2 Minuten oder 7200 für 2 Stunden.

Maximale und minimale Zeiten festlegen

Sie können diemin undmax Attribute verwenden, um die gültigen Zeiten einzuschränken, die der Benutzer auswählen kann. Im folgenden Beispiel legen wir eine Mindestzeit von12:00 und eine Höchstzeit von18:00 fest:

<form>  <label for="appointment-time">    Choose an appointment time (opening hours 12:00 to 18:00):  </label>  <input       type="time"    name="appointment-time"    min="12:00"    max="18:00" />  <span></span></form>

Hier ist das CSS, das im obigen Beispiel verwendet wird. Hier verwenden wir die:valid und:invalid CSS-Eigenschaften, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir fügen ein generiertes Inhalte-Symbol neben der Eingabe als<span> hinzu.

div {  margin-bottom: 10px;  position: relative;}input[type="number"] {  width: 100px;}input + span {  padding-right: 30px;}input:invalid + span::after {  position: absolute;  content: "✖";  padding-left: 5px;}input:valid + span::after {  position: absolute;  content: "✓";  padding-left: 5px;}

Das Ergebnis ist:

• Nur Zeiten zwischen 12:00 und 18:00 werden als gültig angesehen; Zeiten außerhalb dieses Bereichs werden als ungültig markiert.

Min und Max über Mitternacht führen

Indem man einmin Attribut größer als dasmax Attribut setzt, wird der gültige Zeitbereich um Mitternacht herumlaufen, um einen gültigen Zeitbereich zu produzieren. Diese Funktionalität wird von keinem anderen Eingabetyp unterstützt.

const input = document.createElement("input");input.type = "time";input.min = "23:00";input.max = "01:00";input.value = "23:59";if (input.validity.valid && input.type === "time") {  // <input type=time> reversed range supported} else {  // <input type=time> reversed range unsupported}

Zeiten erforderlich machen

Zusätzlich können Sie dasrequired Attribut verwenden, um die Eingabe der Zeit verbindlich zu machen. Browser zeigen einen Fehler an, wenn Sie versuchen, eine Zeit zu übermitteln, die außerhalb der festgelegten Grenzen liegt oder ein leeres Zeitfeld enthält.

Betrachten wir ein Beispiel: hier haben wir Mindest- und Höchstzeiten festgelegt und auch das Feld als erforderlich gemacht:

<form>  <div>    <label for="appointment-time">      Choose an appointment time (opening hours 12:00 to 18:00):    </label>    <input           type="time"      name="appointment-time"      min="12:00"      max="18:00"      required />    <span></span>  </div>  <div>    <input type="submit" value="Submit form" />  </div></form>

Wenn Sie versuchen, das Formular mit einer unvollständigen Zeit (oder mit einer Zeit außerhalb der festgelegten Grenzen) zu übermitteln, zeigt der Browser einen Fehler an. Versuchen Sie jetzt, mit dem Beispiel zu spielen:

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input type="date">
• <input type="datetime-local">
• <input type="week">
• <input type="month">
• Das generische<input>-Element und die Schnittstelle zur Manipulation,HTMLInputElement
• Datum- und Zeitformate in HTML
• Datum- und Zeit-Auswahl-Tutorial