HTML-Element <input type="time"> verstehen
Das HTML-Element <input type="time"> bietet eine Möglichkeit, Benutzereingaben für Zeitangaben in Webformularen zu erfassen. Es definiert ein Eingabefeld, das speziell für die Eingabe von Uhrzeiten konzipiert ist.
### Wie funktioniert <input type="time">?
Das <input type="time">-Element stellt ein Textfeld bereit, in das Benutzer ihre Zeiteingabe eingeben können. Der Wert des Eingabefelds wird als Zeichenfolge im Format HH:MM gespeichert, wobei HH die Stunden und MM die Minuten darstellt. Die Werte können im Bereich von 00:00 bis 23:59 liegen.
### Verwendung von <input type="time"> in Webformularen
Um <input type="time"> in deinen Webformularen zu verwenden, füge einfach den folgenden Code in dein HTML-Dokument ein:
<label for="zeit">Zeit:</label>
<input type="time" id="zeit">
Dies erstellt ein Eingabefeld mit der Beschriftung "Zeit", in das Benutzer ihre Zeiteingabe eingeben können.
### Browserunterstützung und Fallbacks
Das <input type="time">-Element wird von den meisten modernen Browsern unterstützt. Für ältere Browser, die es nicht unterstützen, kannst du auf JavaScript- oder CSS-Fallbacks zurückgreifen.
JavaScript-Fallbacks
// Erstelle ein verstecktes Eingabefeld für Browser, die <input type="time"> nicht unterstützen
let hiddenInput = document.createElement('input');
hiddenInput.type = 'text';
hiddenInput.name = 'zeit';
document.body.appendChild(hiddenInput);
// Füge dem <input type="time">-Element einen Change-Listener hinzu
document.querySelector('input[type="time"]').addEventListener('change', function() {
// Fülle das versteckte Eingabefeld mit dem Wert des <input type="time">
hiddenInput.value = this.value;
});
CSS-Fallbacks
// Verstecke das <input type="time"> für Browser, die es nicht unterstützen
input[type="time"] {
display: none;
}
// Zeige das versteckte Eingabefeld für Browser, die <input type="time"> nicht unterstützen
@media (not (input[type="time"]:invalid)) {
input[type="text"][name="zeit"] {
display: block;
}
}
Verwendung des in Webformularen
Das HTML-Element <input type="time"> ermöglicht es dir, eine Zeiteingabe in deinen Webformularen zu sammeln. Es bietet eine benutzerfreundliche Möglichkeit für Nutzer, bestimmte Uhrzeiten einzugeben.
Festlegen des Datumsbereichs
Du kannst den zulässigen Zeiteingabebereich mit den Attributen min und max eingrenzen. Damit legst du die früheste und späteste Zeit fest, die Nutzer eingeben können. Beispiel:
<input type="time" min="09:00" max="17:00">
Standardwert festlegen
Um einen Standardwert für das Zeiteingabefeld festzulegen, verwende das Attribut value. Dies erleichtert es Nutzern, eine gängige Zeit auszuwählen, falls sie diese wünschen. Beispiel:
<input type="time" value="12:00">
Schrittgröße festlegen
Mit dem Attribut step kannst du die Schrittgröße für die Zeiteingabe festlegen. Dies bestimmt, in welchen Intervallen Nutzer die Zeit einstellen können. Beispiel:
<input type="time" step="300">
Dadurch können Nutzer die Zeit nur in 5-Minuten-Schritten (300 Sekunden) einstellen.
Platzhaltertext hinzufügen
Um einen Platzhaltertext anzuzeigen, der verschwindet, wenn Nutzer mit der Eingabe beginnen, verwende das Attribut placeholder. Beispiel:
<input type="time" placeholder="Zeit eingeben">
Browserunterstützung und Fallbacks
Das HTML-Element <input type="time"> wird seit HTML5 unterstützt und von modernen Browsern wie Chrome, Firefox, Safari und Edge nativ unterstützt. Allerdings kann es in älteren Browsern zu Problemen mit der Unterstützung kommen.
Browser, die <input type="time"> unterstützen
Die folgende Liste zeigt die Browser, die <input type="time"> unterstützen:
- Google Chrome
- Mozilla Firefox
- Apple Safari
- Microsoft Edge
Fallbacks für nicht unterstützte Browser
Wenn du sicherstellen möchtest, dass dein Formular auch in Browsern funktioniert, die <input type="time"> nicht unterstützen, kannst du Fallbacks verwenden. Es gibt mehrere Möglichkeiten, dies zu tun:
-
Polyfills: Polyfills sind JavaScript-Bibliotheken, die Funktionen hinzufügen, die in älteren Browsern nicht nativ unterstützt werden. Du kannst eine Polyfill-Bibliothek wie Timepicker.js verwenden, um die Funktionalität von
<input type="time">in nicht unterstützten Browsern zu emulieren. -
Progressive Enhancement: Progessives Enhancement ist eine Webentwicklungstechnik, bei der du zunächst die grundlegende Funktionalität deines Formulars für alle Browser bereitstellst. Anschließend kannst du mithilfe von CSS und JavaScript optionale Funktionen hinzufügen, für die eine modernere Browserunterstützung erforderlich ist. In diesem Fall kannst du ein einfaches Texteingabefeld als Fallback für
<input type="time">verwenden. - Server-seitiges Rendering: Du kannst die Zeiteingabe auch serverseitig rendern. Hierbei wird ein Server verwendet, um das Formular mit einer vorformatierten Zeiteingabe zu generieren. Diese Methode eignet sich gut für statische Websites oder Websites, die ein starkes Caching verwenden.
Validierung von Zeiteingaben
Die Validierung von Zeiteingaben ist unerlässlich, um korrekte und konsistente Daten zu gewährleisten. Hier sind einige Überlegungen zur Validierung:
Erforderliche Felder
Du kannst festlegen, ob die Zeiteingabe erforderlich ist oder nicht. Wenn sie erforderlich ist, musst du sicherstellen, dass der Benutzer eine Zeit eingibt, bevor er das Formular absenden kann.
Zulässige Zeitformate
Lege die zulässigen Zeitformate fest. Dies kann das 12-Stunden-Format (z. B. 11:30 AM) oder das 24-Stunden-Format (z. B. 11:30) umfassen.
Gültige Wertebereiche
Stelle sicher, dass die eingegebene Zeit innerhalb eines gültigen Bereichs liegt. Beispielsweise kannst du die Eingaben auf Zeiten zwischen 00:00 und 23:59 beschränken.
Reguläre Ausdrücke
Du kannst reguläre Ausdrücke verwenden, um die Eingabe zu validieren. Reguläre Ausdrücke sind Muster, die bestimmte Zeichenfolgen oder Formate erkennen können. Hier ist ein Beispiel für einen regulären Ausdruck, der das 24-Stunden-Zeitformat validiert:
/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/
Zeitbibliotheken
Es gibt Zeitbibliotheken wie Moment.js, die die Validierung von Zeiteingaben vereinfachen können. Diese Bibliotheken bieten Funktionen zur Validierung, Formatierung und Manipulation von Zeitwerten.
Benutzerfreundlichkeit
Denke an die Benutzerfreundlichkeit bei der Validierung von Zeiteingaben. Vermeide es, zu strenge Validierungen zu verwenden, die die Benutzer frustrieren könnten. Biete klare Anweisungen und Feedback, um den Benutzern bei der Eingabe korrekter Zeiten zu helfen.
Formatierungsoptionen
Beim Umgang mit Datums- und Zeiteingaben in Webformularen hast du mehrere Formatierungsoptionen zur Verfügung, mit denen du die Benutzeroberfläche an deine spezifischen Anforderungen anpassen kannst.
Schrittweite
Wenn du einen Zeitbereich anzeigst, kannst du die Schrittweite festlegen, in der die Benutzer Zeitwerte auswählen können. Beispielsweise kannst du die Schrittweite auf 15 Minuten festlegen, sodass nur die Zeiten 00:00, 00:15, 00:30 usw. ausgewählt werden können.
<input type="time" step="900">
Mindest- und Höchstwert
Du kannst auch Mindest- und Höchstwerte festlegen, um den Bereich der zulässigen Zeiten einzuschränken. Dies ist hilfreich, wenn du sicherstellen möchtest, dass die Benutzer nur bestimmte Zeitfenster auswählen können.
<input type="time" min="09:00" max="17:00">
Datumsformatierung
Je nach deinen Anforderungen kannst du die Datumsformatierung anpassen. Es stehen mehrere Optionen zur Verfügung, darunter:
- 24-Stunden-Format: Zeigt die Zeit im 24-Stunden-Format an (z. B. 14:30).
- 12-Stunden-Format: Zeigt die Zeit im 12-Stunden-Format an (z. B. 02:30 PM).
- Anzeige der Sekunden: Zeigt die Zeit inklusive Sekunden an (z. B. 14:30:00).
<input type="time" format="24">
<input type="time" format="12">
<input type="time" format="24:00">
Designanpassung
Zusätzlich zu den oben genannten Formatierungsoptionen kannst du das Design des <input type="time">-Elements mit CSS anpassen. Beispielsweise kannst du die Schriftgröße, -farbe und -ausrichtung ändern.
input[type=time] {
font-size: 1.2rem;
color: #333;
text-align: center;
}
Durch die Verwendung dieser Formatierungsoptionen kannst du die Benutzeroberfläche für Zeiteingaben in deinen Webformularen anpassen und die Benutzererfahrung verbessern.
Umwandlung in andere Zeitformate
Manchmal musst du die vom Benutzer eingegebene Zeit möglicherweise in ein anderes Format konvertieren, um sie für bestimmte Zwecke zu verwenden. Hier sind einige gängige Konvertierungen, die du durchführen kannst:
Konvertieren in ein 12-Stunden-Format
Wenn die eingegebene Zeit im 24-Stunden-Format vorliegt, kannst du sie mithilfe von JavaScript-Funktionen oder Bibliotheken in das 12-Stunden-Format konvertieren. Beispielsweise kannst du die Moment.js-Bibliothek verwenden, um dies zu erreichen:
const moment = require('moment');
const time24 = '21:30';
const time12 = moment(time24, 'HH:mm').format('hh:mm A');
Konvertieren in den Unix-Zeitstempel
Der Unix-Zeitstempel ist die Anzahl der Sekunden, die seit dem 1. Januar 1970 um 00:00:00 Uhr UTC vergangen sind. Um die eingegebene Zeit in einen Unix-Zeitstempel zu konvertieren, kannst du folgende Methode verwenden:
const date = new Date('2023-03-08T12:00:00');
const unixTimestamp = date.getTime();
Konvertieren in einen ISO-String
Der ISO-String ist ein standardisiertes Format zur Darstellung von Datum und Uhrzeit. Um die eingegebene Zeit in einen ISO-String zu konvertieren, kannst du die toISOString()-Methode verwenden:
const date = new Date('2023-03-08T12:00:00');
const isoString = date.toISOString();
Zusätzliche Konvertierungen
Abhängig von deinen spezifischen Anforderungen kannst du auch andere Konvertierungen durchführen, wie z. B.:
- Konvertieren in ein benutzerdefiniertes Format mithilfe von regulären Ausdrücken
- Konvertieren in ein Stampformat für die Verwendung in Datenbanken
- Konvertieren in ein Format für die Verwendung in einer API
Tipps zur Verbesserung der Benutzererfahrung
Bei der Verwendung des in Webformularen musst du die Benutzerfreundlichkeit berücksichtigen. Hier sind einige Tipps, die du befolgen kannst, um die Benutzererfahrung zu verbessern:
### Verwendung von Platzhaltertext
Verwende einen Platzhaltertext, um das erwartete Zeitformat anzugeben. Dies hilft Benutzerinnen und Benutzern, das richtige Format einzugeben und vermeidet Verwirrung.
### Aktivierung der automatischen Vervollständigung
Aktiviere die automatische Vervollständigung, damit Benutzerinnen und Benutzer schnell und einfach aus einer Liste gängiger Zeiten auswählen können.
### Bereitstellung von Hilfetext
Verwende Hilfetext, um Erläuterungen oder Anleitungen zur Verwendung des Felds bereitzustellen. Dies hilft Benutzerinnen und Benutzern, wenn sie nicht sicher sind, wie sie die Zeit eingeben sollen.
### Implementierung einer benutzerdefinierten Validierung
Implementiere eine benutzerdefinierte Validierung, um sicherzustellen, dass eingegebene Zeiten gültig sind und deinem gewünschten Format entsprechen. Dies gewährleistet genaue Dateneingaben und vermeidet Fehler.
### Verwendung von Browser-nativen Eingabesystemen
Nutze browser-native Eingabesysteme, die auf mobilen Geräten eine optimierte Benutzeroberfläche für die Zeiteingabe bieten. Dies ermöglicht eine einfache und intuitive Zeitauswahl.
### Vermeidung von unnötigen Einschränkungen
Vermeide unnötige Einschränkungen, wie z. B. das Festlegen eines begrenzten Zeitbereichs oder die Erzwingung eines bestimmten Formats. Dies kann die Benutzeroberfläche einschränken und Frustration hervorrufen.
### Berücksichtigung von Barrierefreiheit
Stelle sicher, dass dein barrierefrei ist. Dies umfasst die Bereitstellung von Beschriftungen, die Verwendung von ARIA-Attributen und die Unterstützung von Bildschirmlesegeräten.