Die HTML5-Eingabetypen

Dieser Feldtyp wird mit dem Wert email für das type-Attribut festgelegt:

<label for="email">Enter your email address:</label><br />

<input type="email" id="email" name="email" />

Wird dieser type verwendet, muss der Wert eine E-Mail-Adresse sein, um gültig zu sein. Jeder andere Inhalt führt dazu, dass der Browser beim Absenden des Formulars einen Fehler anzeigt. Dies können Sie im Screenshot unten sehen.

Sie können das multiple-Attribut in Kombination mit dem email-Eingabetyp verwenden, um die Eingabe mehrerer durch Kommas getrennter E-Mail-Adressen im selben Eingabefeld zu ermöglichen:

<input type="email" id="email" name="email" multiple />

Auf einigen Geräten, insbesondere Touch-Geräten mit dynamischen Tastaturen wie Smartphones, könnte eine andere virtuelle Tastatur angezeigt werden, die besser zum Eingeben von E-Mail-Adressen geeignet ist, inklusive der @-Taste:

Dies ist ein weiterer guter Grund, diese neueren Eingabetypen zu verwenden, um das Benutzererlebnis für die Nutzer dieser Geräte zu verbessern.

Wie Sie oben sehen können, bietet email — zusammen mit anderen neueren input-Typen — eine eingebaute client-seitige Fehlerüberprüfung, die vom Browser durchgeführt wird, bevor die Daten zum Server gesendet werden. Es ist eine hilfreiche Unterstützung, um Benutzer dazu zu bringen, ein Formular korrekt auszufüllen, und es kann Zeit sparen: Es ist nützlich zu wissen, dass Ihre Daten nicht korrekt sind, ohne auf eine Antwort des Servers warten zu müssen.

Aber es sollte nicht als umfassende Sicherheitsmaßnahme betrachtet werden! Ihre Anwendungen sollten immer Sicherheitsprüfungen für alle per Formular übermittelten Daten sowohl auf der Server- als auch auf der Client-Seite durchführen, da die Client-seitige Validierung zu einfach ausgeschaltet werden kann, sodass böswillige Benutzer trotzdem leicht fehlerhafte Daten an Ihren Server senden können. Lesen Sie Websitesicherheit für eine Vorstellung davon, was passieren könnte; die Implementierung der serverseitigen Validierung geht etwas über den Rahmen dieses Moduls hinaus, aber Sie sollten dies berücksichtigen.

Beachten Sie, dass a@b gemäß den standardmäßig bereitgestellten Einschränkungen eine gültige E-Mail-Adresse ist. Dies ist der Fall, weil der email-Eingabetyp standardmäßig Intranet-E-Mail-Adressen zulässt. Um ein anderes Validierungsverhalten zu implementieren, können Sie das pattern-Attribut verwenden. Sie können auch die Fehlermeldungen anpassen. Wie Sie diese Funktionen nutzen, besprechen wir später im Client-seitige Formularvalidierung-Artikel.

Suchfelder sind dazu gedacht, auf Seiten und in Apps Suchfelder zu erstellen. Dieser Feldtyp wird durch den Wert search für das type-Attribut festgelegt:

<label for="search">Enter a search term:</label><br />

<input type="search" id="search" name="search" />

Der Hauptunterschied zwischen einem text-Feld und einem search-Feld besteht darin, wie der Browser sein Aussehen gestaltet. In einigen Browsern werden search-Felder mit abgerundeten Ecken dargestellt. In einigen Browsern wird ein "Ⓧ"-Löschen-Symbol angezeigt, das bei einem Klick den Feldwert löscht. Dieses Löschen-Symbol erscheint nur, wenn das Feld einen Wert hat, und abgesehen vom Safari wird es nur angezeigt, wenn das Feld fokussiert ist. Außerdem kann auf Geräten mit dynamischen Tastaturen die Eingabetaste der Tastatur "search" lauten oder ein Lupensymbol anzeigen.

Ein weiteres erwähnenswertes Merkmal ist, dass die Werte eines search-Feldes automatisch gespeichert und wiederverwendet werden können, um bei mehreren Seiten derselben Website die automatische Vervollständigung anzubieten; dies geschieht in den meisten modernen Browsern automatisch.

Ein spezielles Feld zum Ausfüllen von Telefonnummern kann erstellt werden, indem tel als Wert des type-Attributs verwendet wird:

<label for="tel">Enter a telephone number:</label><br />

<input type="tel" id="tel" name="tel" />

Auf Touch-Geräten mit einer dynamischen Tastatur zeigen die meisten Geräte bei type="tel" eine numerische Tastatur an, was diesen Typ nützlich macht, wann immer eine numerische Tastatur nützlich ist, und nicht nur für Telefonnummern verwendet werden muss.

-

Aufgrund der großen Vielfalt an Telefonnummernformaten weltweit erzwingt diese Art von Feld keine Einschränkungen für den vom Benutzer eingegebenen Wert (dies bedeutet, dass Buchstaben usw. enthalten sein können).

Wie bereits erwähnt, kann das pattern-Attribut verwendet werden, um Einschränkungen durchzusetzen, was Sie in Client-seitige Formularvalidierung kennenlernen werden.

Ein spezieller Feldtyp zum Eingeben von URLs kann erstellt werden, indem der Wert url für das type-Attribut verwendet wird:

<label for="url">Enter a URL:</label><br />

<input type="url" id="url" name="url" />

Es fügt spezielle Validierungseinschränkungen zum Feld hinzu. Der Browser meldet einen Fehler, wenn kein Protokoll (wie http:) eingegeben wird oder wenn die URL anderweitig fehlerhaft ist. Auf Geräten mit dynamischen Tastaturen werden oft einige oder alle Punkte, Doppelpunkte und Schrägstriche standardmäßig angezeigt.

Steuerungen zur Eingabe von Zahlen können mit einem <input> type von number erstellt werden. Diese Steuerung sieht wie ein Textfeld aus, erlaubt aber nur Fließkommazahlen und bietet normalerweise Schaltflächen in Form eines Spinners, um den Wert der Steuerung zu erhöhen und zu verringern. Auf Geräten mit dynamischen Tastaturen wird im Allgemeinen die numerische Tastatur angezeigt.

<label for="number">Enter a number:</label><br />

<input type="number" id="number" name="number" />

Mit dem number-Eingabetyp können Sie die minimalen und maximalen zulässigen Werte durch Festlegen der min und max Attribute einschränken.

Sie können auch das step-Attribut verwenden, um den Inkremenzuwachs und -abzug festzulegen, der durch Drücken der Spinner-Tasten verursacht wird. Standardmäßig validiert der Zahleneingabetyp nur, wenn die Zahl eine Ganzzahl ist, da das step-Attribut standardmäßig auf 1 gesetzt ist. Um Fließkommazahlen zuzulassen, geben Sie step="any" oder einen bestimmten Wert wie step="0.01" an, um die Fließkommazahl einzuschränken. Wird es weggelassen, da der step-Wert standardmäßig auf 1 gesetzt ist, sind nur Ganzzahlen gültig.

Schauen wir uns einige Beispiele an:

Dieses Beispiel erstellt eine Zahlensteuerung, deren gültiger Wert auf einen ungeraden Wert zwischen 1 und 10 beschränkt ist. Die Erhöhungs- und Verminderungstasten ändern den Wert um 2, beginnend mit dem min-Wert.

<label for="number">Enter an odd number between 1 and 10:</label><br />

<input type="number" name="age" id="age" min="1" max="10" step="2" />

Dieses Beispiel erstellt eine Zahlensteuerung, deren Wert auf einen beliebigen Wert zwischen 0 und 1 einschließlich beschränkt ist, und deren Erhöhungs- und Verminderungstasten dessen Wert um 0.01 ändern.

<label for="number">Enter a number between 0 and 1, inclusive:</label><br />

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />

Der number-Eingabetyp macht Sinn, wenn der Bereich der gültigen Werte begrenzt ist, wie das Alter oder die Körpergröße einer Person. Ist der Bereich zu groß, als dass inkrementelle Erhöhungen sinnvoll wären (wie bei US-Postleitzahlen, die von 00001 bis 99999 reichen), wäre der tel-Typ möglicherweise eine bessere Wahl; er bietet die numerische Tastatur, verzichtet jedoch auf die Spinner-Benutzeroberflächenfunktion der Zahl.

Eine andere Möglichkeit, eine Zahl auszuwählen, ist die Verwendung eines Schiebereglers. Diese sehen Sie häufig auf Websites wie Shopping-Sites, auf denen Sie einen maximalen Immobilienpreis festlegen möchten, nach dem gefiltert werden soll. Schauen wir uns ein Live-Beispiel an, um dies zu veranschaulichen:

Nutzungsbedingt sind Schieberegler weniger genau als Textfelder. Daher werden sie verwendet, um eine Zahl auszuwählen, deren genauer Wert nicht unbedingt wichtig ist.

Ein Schieberegler wird mit dem <input>-Element erstellt, dessen type-Attribut auf range gesetzt ist. Der Schieber kann mit der Maus oder Berührung oder mit den Pfeiltasten der Tastatur verschoben werden.

Es ist wichtig, den Schieberegler korrekt zu konfigurieren. Daher wird dringend empfohlen, die min, max und step Attribute festzulegen, die die Mindest-, Höchst- und Inkrementwerte festlegen.

Schauen wir uns den Code hinter dem obigen Beispiel an, damit Sie sehen, wie es gemacht wird. Zuerst der grundlegende HTML-Code:

<label for="price">Choose a maximum house price: </label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="1000"
  value="250000" />
<output class="price-output" for="price"></output>

Dieses Beispiel erstellt einen Schieberegler, dessen Wert zwischen 50000 und 500000 liegen kann, der sich um jeweils 1000 erhöht/verringert. Wir haben ihm einen Standardwert von 250000 gegeben, unter Verwendung des value-Attributs.

Ein Problem mit Schiebereglern ist, dass sie keine Art von visuellem Feedback darüber geben, welcher aktuelle Wert vorliegt. Aus diesem Grund haben wir ein <output>-Element aufgenommen, um den aktuellen Wert anzuzeigen. Sie könnten einen Eingabewert oder das Ergebnis einer Berechnung in jedem Element anzeigen, aber <output> ist besonders – wie <label> – und kann ein for-Attribut haben, das es Ihnen ermöglicht, es mit dem Element oder den Elementen zu verknüpfen, aus denen der Ausgabe-Wert stammt.

Um den aktuellen Wert tatsächlich anzuzeigen und ihn bei Änderungen zu aktualisieren, müssen Sie JavaScript verwenden, was mit wenigen Anweisungen erreicht werden kann:

const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});

body {
  text-align: center;
}
label,
output {
  display: block;
}

Hier speichern wir Referenzen zum range-Input und zum output in zwei Variablen. Dann setzen wir sofort den textContent des output auf den aktuellen value des Input. Schließlich wird ein Ereignislistener gesetzt, um sicherzustellen, dass das textContent des output bei jeder Bewegung des Schiebereglers auf den neuen Wert aktualisiert wird.

Im Allgemeinen ist es für ein gutes Benutzererlebnis bei der Erfassung von Datums- und Zeitwerten wichtig, eine Kalenderauswahl-Benutzeroberfläche bereitzustellen. Diese ermöglichen es Benutzern, Daten auszuwählen, ohne in eine native Kalenderanwendung wechseln zu müssen oder sie möglicherweise in unterschiedlichen Formaten einzugeben, die schwer zu parsen sind. Die letzte Minute des vorherigen Jahrtausends kann auf folgende verschiedene Arten ausgedrückt werden: 1999/12/31, 23:59, oder 12/31/99T11:59PM.

HTML-Datum-Steuerungen sind verfügbar, um dieses spezifische Art von Daten zu verarbeiten, sie bieten Kalender-Widgets und machen die Daten einheitlich.

Eine Datum- und Zeitsteuerung wird mit dem <input>-Element und einem geeigneten Wert für das type-Attribut erstellt, abhängig davon, ob Sie Daten, Zeiten oder beides erfassen möchten. Hier ist ein Live-Beispiel:

<label for="party">Choose a date and time for your party:</label>
<input type="datetime-local" id="party" name="bday" />
<span class="validity"></span>

input:invalid + span:after {
  content: " ✖";
}

input:valid + span:after {
  content: " ✓";
}

Schauen wir uns die verschiedenen verfügbaren Typen kurz an. Beachten Sie, dass die Nutzung dieser Typen relativ komplex ist, insbesondere wenn man die Browserunterstützung berücksichtigt (siehe unten); um die vollständigen Einzelheiten zu erfahren, folgen Sie den Links unten zu den Referenzseiten für jeden Typ, die detaillierte Beispiele enthalten.

<input type="date"> erstellt ein Widget, um ein Datum (Jahr, Monat und Tag, ohne Zeit) anzuzeigen und auszuwählen.

<label for="date">Enter the date:</label><br />

<input type="date" name="date" id="date" />

<input type="datetime-local"> erstellt ein Widget, um ein Datum mit Uhrzeit ohne spezifische Zeitzoneninformationen anzuzeigen und auszuwählen.

<label for="month">Enter the date and time:</label><br />

<input type="datetime-local" name="datetime" id="datetime" />

<input type="month"> erstellt ein Widget, um einen Monat mit Jahr anzuzeigen und auszuwählen.

<label for="month">Enter the month:</label><br />

<input type="month" name="month" id="month" />

<input type="time"> erstellt ein Widget, um einen Zeitwert anzuzeigen und auszuwählen. Während die Zeit möglicherweise im 12-Stunden-Format angezeigt wird, ist der zurückgegebene Wert im 24-Stunden-Format.

<label for="time">Enter a time:</label><br />

<input type="time" name="time" id="time" />

<input type="week"> erstellt ein Widget, um eine Wochenzahl und deren Jahr anzuzeigen und auszuwählen.

Die Woche beginnt am Montag und endet am Sonntag. Zusätzlich enthält die erste Woche 1 jedes Jahres den ersten Donnerstag dieses Jahres, der möglicherweise nicht den ersten Tag des Jahres enthält oder die letzten Tage des Vorjahres umfassen kann.

<label for="week">Enter the week:</label><br />

<input type="week" name="week" id="week" />

Alle Datum- und Zeit-Steuerungen können unter Verwendung der min und max-Attribute eingeschränkt werden, mit weiterer Einschränkungsmöglichkeit über das step-Attribut (dessen Wert je nach Eingabetyp variiert).

<label for="myDate">When are you available this summer?</label><br />
<input
  type="date"
  name="myDate"
  min="2025-06-01"
  max="2025-08-31"
  step="7"
  id="myDate" />

Farben sind immer ein wenig schwierig zu handhaben. Es gibt viele Möglichkeiten, sie auszudrücken: RGB-Werte (dezimal oder hexadezimal), HSL-Werte, Schlüsselwörter und so weiter.

Eine color-Steuerung kann erstellt werden, indem das <input>-Element mit dem type-Attribut auf color gesetzt wird:

<label for="color">Pick a color:</label><br />

<input type="color" name="color" id="color" />

Beim Klicken auf eine Farbsteuerung wird im Allgemeinen die Standardfarbauswahlfunktion des Betriebssystems angezeigt, mit der Sie auswählen können. Der zurückgegebene Wert ist immer eine kleingeschriebene sechswertige Hexadezimalfarbe.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können einige weitere Tests durchführen, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie fortfahren – siehe Testen Sie Ihre Fähigkeiten: HTML5-Steuerungen.

Das bringt uns zum Ende unseres Rundgangs durch die HTML5-Formulareingabetypen. Es gibt jedoch einige andere Steuerungstypen, die aufgrund ihres sehr spezifischen Verhaltens nicht einfach in Gruppen eingeteilt werden können, aber dennoch wichtig zu kennen sind. Wir werden diese im nächsten Artikel behandeln.

• Zurück
• Übersicht: Webformulare
• Weiter