Die HTML5-Eingabetypen

Dieser Feldtyp wird durch den Wert email für das type-Attribut gesetzt:

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

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

Wenn dieser type verwendet wird, muss der Wert eine E-Mail-Adresse sein, damit er gültig ist. Alle anderen Inhalte führen dazu, dass der Browser beim Absenden des Formulars einen Fehler anzeigt. Sie können dies im folgenden Screenshot sehen.

Sie können das multiple-Attribut in Kombination mit dem email-Eingabetyp verwenden, um mehrere durch Kommas getrennte E-Mail-Adressen im selben Eingabefeld einzugeben:

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

Auf einigen Geräten — insbesondere Touchgeräte mit dynamischen Tastaturen wie Smartphones — könnte eine andere virtuelle Tastatur angezeigt werden, die für die Eingabe von E-Mail-Adressen besser geeignet ist, einschließlich der @-Taste:

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

Wie oben zu sehen, bietet email — zusammen mit anderen neueren input-Typen — eine eingebaute client-seitige Fehlervalidierung, die vom Browser durchgeführt wird, bevor die Daten an den Server gesendet werden. Es ist eine hilfreiche Unterstützung, um Benutzer zu einer korrekten Formularausfüllung zu leiten, und es kann Zeit sparen: Es ist nützlich zu wissen, dass Ihre Daten sofort nicht korrekt sind, anstatt auf eine Antwort des Servers zu warten.

Aber es sollte nicht als eine umfassende Sicherheitsmaßnahme betrachtet werden! Ihre Anwendungen sollten immer Sicherheitsüberprüfungen auf alle über Formulare übermittelten Daten sowohl serverseitig als auch clientseitig durchführen, da clientseitige Validierung zu einfach auszuschalten ist, so dass böswillige Benutzer immer noch leicht schlechte Daten an Ihren Server senden können. Lesen Sie Website-Sicherheit, um eine Idee zu bekommen, was passieren könnte; die Implementierung von serverseitiger Validierung geht über den Rahmen dieses Moduls hinaus, aber Sie sollten dies im Hinterkopf behalten.

Beachten Sie, dass a@b gemäß der standardmäßig bereitgestellten Beschränkungen eine gültige E-Mail-Adresse ist. Dies liegt daran, dass 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 können, werden wir im Artikel Client-seitige Formularvalidierung später besprechen.

Suchfelder sind dazu gedacht, um Suchfelder auf Seiten und Apps 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 liegt in der Art und Weise, wie der Browser sein Erscheinungsbild gestaltet. In einigen Browsern werden search-Felder mit abgerundeten Ecken gerendert. In einigen Browsern wird ein "Ⓧ"-Löschsymbol angezeigt, das beim Anklicken das Feld von jedem Wert befreit. Dieses Löschsymbol erscheint nur, wenn das Feld einen Wert hat, und abgesehen von Safari wird es nur angezeigt, wenn das Feld fokussiert ist. Außerdem kann auf Geräten mit dynamischen Tastaturen die Enter-Taste der Tastatur als "search" angezeigt werden oder ein Lupensymbol anzeigen.

Ein weiteres erwähnenswertes Merkmal ist, dass die Werte eines search-Feldes automatisch gespeichert und wiederverwendet werden können, um die automatische Vervollständigung über mehrere Seiten derselben Website 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 einem Touch-Gerät mit dynamischer Tastatur zeigen die meisten Geräte eine numerische Tastatur an, wenn type="tel" erkannt wird, was bedeutet, dass dieser Typ immer dann nützlich ist, wenn eine numerische Tastatur nützlich ist, und nicht nur für Telefonnummern verwendet werden muss.

-

Aufgrund der Vielzahl an Telefonnummernformaten weltweit erzwingt diese Art von Feld keine Einschränkungen für den von einem Benutzer eingegebenen Wert (dies bedeutet, dass es Buchstaben etc. enthalten kann).

Wie bereits erwähnt, kann das pattern-Attribut verwendet werden, um Einschränkungen durchzusetzen, über die Sie in Client-seitige Formularvalidierung mehr erfahren.

Ein spezieller Feldtyp für die Eingabe von URLs kann erstellt werden, indem url als Wert des type-Attributs verwendet wird:

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

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

Es fügt dem Feld spezielle Validierungsbeschränkungen 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 zeigt die Standardsystemtastatur häufig einige oder alle Doppelpunkt, Punkt und Schrägstrich als Standardtasten an.

Steuerungen zur Eingabe von Zahlen können mit einem <input> type von number erstellt werden. Diese Steuerung sieht aus wie ein Textfeld, erlaubt jedoch nur Fließkommazahlen und bietet in der Regel Tasten in Form eines Spinners, um den Wert der Steuerung zu erhöhen und zu verringern. Auf Geräten mit dynamischen Tastaturen wird in der Regel 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 minimal und maximal erlaubten Werte einschränken, indem Sie die min und max-Attribute festlegen.

Sie können auch das step-Attribut verwenden, um die durch das Drücken der Spinnertasten verursachte Zunahme und Abnahme einzustellen. Standardmäßig validiert der Zahlen-Eingabetyp nur, ob die Zahl eine ganze Zahl 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ßkommastelle einzuschränken. Wenn ausgelassen, sind nur ganze Zahlen gültig, da der step-Wert standardmäßig auf 1 gesetzt ist.

Lassen Sie uns einige Beispiele betrachten:

Dieses Beispiel erstellt eine Zahlensteuerung, deren gültiger Wert auf ungerade Werte zwischen 1 und 10 beschränkt ist. Die Erhöhungs- und Verringerungstasten ä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 jeden Wert zwischen 0 und 1 einschließlich beschränkt ist, und dessen Erhöhungs- und Verringerungstasten den 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 z.B. das Alter oder die Größe einer Person. Wenn der Bereich zu groß ist, als dass inkrementelle Erhöhungen Sinn machen würden (wie beispielsweise USA-Postleitzahlen, die von 00001 bis 99999 reichen), könnte der tel-Typ eine bessere Option sein; er bietet die numerische Tastatur, verzichtet jedoch auf die Spinner-UI-Funktion der Zahl.

Eine andere Möglichkeit, eine Zahl auszuwählen, ist die Verwendung eines Schiebereglers. Diese sehen Sie häufig auf Seiten wie Einkaufsseiten, auf denen Sie einen Maximalpreis als Filter festlegen möchten. Schauen wir uns ein Live-Beispiel an, um dies zu veranschaulichen:

Benutzungsweise 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 durch die <input> mit ihrem type-Attribut, gesetzt auf den Wert range, erstellt. Der Schieberegler-Daumen kann über Maus oder Berührung oder mit den Pfeiltasten der Tastatur bewegt werden.

Es ist wichtig, Ihren Schieberegler richtig zu konfigurieren. Dazu wird dringend empfohlen, die min, max und step-Attribute zu setzen, die die minimalen, maximalen und Inkrement-Werte festlegen, jeweils.

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

<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 und der in Schritten von 1000 zunimmt/abnimmt. Wir haben ihm einen Standardwert von 250000 gegeben, indem wir das value-Attribut verwendet haben.

Ein Problem bei Schiebereglern ist, dass sie keine visuelle Rückmeldung über den aktuellen Wert bieten. Daher haben wir ein <output>-Element aufgenommen, um den aktuellen Wert zu enthalten. Sie könnten einen Eingabewert oder das Ergebnis einer Berechnung in einem beliebigen 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, von denen der Ausgabewert stammt.

Um den aktuellen Wert tatsächlich anzuzeigen und zu aktualisieren, wenn er sich ändert, 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 auf den range-Input und das output in zwei Variablen. Dann setzen wir sofort das textContent von output auf den aktuellen value des Inputs. Schließlich wird ein Event-Listener gesetzt, um sicherzustellen, dass wann immer der Schieberegler bewegt wird, das textContent des output auf den neuen Wert aktualisiert wird.

Für eine gute Benutzererfahrung beim Sammeln von Datums- und Zeitwerten ist es im Allgemeinen wichtig, eine Kalenderauswahl-UI bereitzustellen. Diese ermöglichen es den Benutzern, Daten auszuwählen, ohne einen Wechsel zur nativen Kalenderanwendung vornehmen 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-Datumssteuerungen sind verfügbar, um diese spezifische Art von Daten zu behandeln, indem Kalender-Widgets bereitgestellt werden und die Daten einheitlich gemacht werden.

Eine Datum- und Zeitsteuerung wird mit dem <input>-Element und einem geeigneten Wert für das type-Attribut erstellt, je nachdem, ob Sie Daten, Zeiten oder beides sammeln 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 in Kürze an. Beachten Sie, dass die Verwendung dieser Typen ziemlich komplex ist, insbesondere unter Berücksichtigung der Browser-Unterstützung (siehe unten); um die vollständigen Details zu erfahren, folgen Sie den Links unten zu den Referenzseiten für jeden Typ, einschließlich detaillierter Beispiele.

<input type="date"> erstellt ein Widget zur Anzeige und Auswahl eines Datums (Jahr, Monat und Tag, ohne Zeit).

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

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

<input type="datetime-local"> erstellt ein Widget zur Anzeige und Auswahl eines Datums mit Zeit, ohne spezifische Zeitzoneninformationen.

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

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

<input type="month"> erstellt ein Widget zur Anzeige und Auswahl eines Monats mit einem Jahr.

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

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

<input type="time"> erstellt ein Widget zur Anzeige und Auswahl eines Zeitwertes. Während die Zeit im 12-Stunden-Format angezeigt wird, erfolgt 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 zur Anzeige und Auswahl einer Kalenderwoche und deren Jahr.

Wochen beginnen am Montag und gehen bis Sonntag. Zusätzlich enthält die erste Woche 1 jedes Jahres den ersten Donnerstag dieses Jahres — was möglicherweise nicht den ersten Tag des Jahres einschließt oder die letzten Tage des vorherigen Jahres umfassen kann.

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

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

Alle Datums- und Zeitsteuerungen können mit den min und max-Attributen eingeschränkt werden, mit weiteren Einschränkungen, die über das step-Attribut möglich sind (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 etwas schwierig zu handhaben. Es gibt viele Möglichkeiten, sie darzustellen: RGB-Werte (dezimal oder hexadezimal), HSL-Werte, Schlüsselwörter und so weiter.

Eine color-Steuerung kann unter Verwendung des <input>-Elements erstellt werden, wobei ihr type-Attribut auf den Wert color gesetzt ist:

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

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

Beim Klicken auf eine Farbauswahlsteuerung wird in der Regel die Standardfarbauswahlfunktionalität des Betriebssystems angezeigt, damit Sie wählen können. Der zurückgegebene Wert ist stets eine kleingeschriebene 6-stellige hexadezimale Farbe.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Einige weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen, finden Sie unter Testen Sie Ihre Fähigkeiten: HTML5 Steuerungen.

Damit sind wir am Ende unserer Tour durch die HTML5-Formulareingabetypen angelangt. Es gibt noch einige andere Steuerungstypen, die aufgrund ihrer sehr spezifischen Verhaltensweisen nicht leicht gruppiert werden können, aber dennoch wichtig zu lernen sind. Diese behandeln wir im nächsten Artikel.

• Zurück
• Übersicht: Webformulare
• Weiter

• Anleitung zur Erstellung benutzerdefinierter Formularsteuerungen
• Formulare über JavaScript versenden