Die HTML5-Eingabetypen

Diese Art von Feld wird durch den Wert email für das type-Attribut festgelegt:

<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, um gültig zu sein. Jeder andere Inhalt führt dazu, dass der Browser beim Absenden des Formulars einen Fehler anzeigt. Sie können dies 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 auf Touch-Geräten mit dynamischen Tastaturen wie Smartphones – kann eine andere virtuelle Tastatur angezeigt werden, die besser zum Eingeben von E-Mail-Adressen geeignet ist, einschließlich der @-Taste:

Dies ist ein weiterer guter Grund, diese neueren Eingabetypen zu verwenden, da sie die Benutzererfahrung für Nutzer dieser Geräte 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 an den Server gesendet werden. Es ist eine nützliche Hilfe, um Benutzer dazu zu bringen, ein Formular genau auszufüllen, und es kann Zeit sparen: Es ist nützlich zu wissen, dass Ihre Daten nicht korrekt sind, ohne auf eine Antwort vom Server warten zu müssen.

Aber es sollte nicht als umfassende Sicherheitsmaßnahme betrachtet werden! Ihre Anwendungen sollten immer Sicherheitsüberprüfungen für alle über Formulare übermittelten Daten sowohl serverseitig als auch clientseitig durchführen, da die clientseitige Validierung zu einfach deaktiviert werden kann und so böswillige Benutzer weiterhin problemlos falsche Daten an Ihren Server senden können. Lesen Sie Website-Sicherheit für eine Vorstellung davon, was passieren könnte; die Implementierung serverseitiger Validierung liegt etwas außerhalb des Umfangs dieses Moduls, aber Sie sollten es im Hinterkopf behalten.

Beachten Sie, dass a@b gemäß den standardmäßig bereitgestellten Einschrä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. Wir werden später im Artikel Client-seitige Formularvalidierung darüber sprechen, wie Sie diese Funktionen verwenden können.

Suchfelder sind dafür gedacht, Suchfelder auf Seiten und Apps zu erstellen. Dieser Feldtyp wird festgelegt, indem der Wert search für das type-Attribut verwendet wird:

<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 Erscheinungsbild gestaltet. In einigen Browsern werden search-Felder mit abgerundeten Ecken dargestellt. In einigen Browsern wird ein "Ⓧ"-Löschen-Symbol angezeigt, das das Feld bei Klicken von jedem Wert befreit. Dieses Löschen-Symbol erscheint nur, wenn das Feld einen Wert hat und, außer in Safari, nur, wenn das Feld fokussiert ist. Darüber hinaus kann auf Geräten mit dynamischen Tastaturen der "Eingabe"-Taste der Text "search" zugeordnet oder ein Lupensymbol angezeigt werden.

Eine weitere erwähnenswerte Funktion ist, dass die Werte eines search-Felds automatisch gespeichert und wiederverwendet werden können, um eine Autovervollstä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" />

Wenn auf einem Touchgerät mit einer dynamischen Tastatur darauf zugegriffen wird, zeigen die meisten Geräte beim Auftreten von type="tel" eine numerische Tastatur an, was bedeutet, dass dieser Typ immer dann nützlich ist, wenn eine numerische Tastatur nützlich ist, und nicht nur für Telefonnummern.

-

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

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

Ein spezieller Feldtyp für die Eingabe 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 dem Feld spezielle Validierungseinschrä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 Standard-Tastatur häufig einige oder alle der Doppelpunkte, Punkte und Schrägstriche als Standardtasten an.

Steuerelemente zur Eingabe von Zahlen können mit einem <input> type von number erstellt werden. Dieses Steuerelement sieht aus wie ein Textfeld, erlaubt jedoch nur Fließpunktzahlen und bietet in der Regel Tasten in Form eines Spinners, um den Wert des Steuerelements 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 minimalen und maximalen zulässigen Werte einschränken, indem Sie die min und max-Attribute festlegen.

Sie können auch das step-Attribut verwenden, um den Erhöhungs- und Verringerungswert festzulegen, der durch Drücken der Spinner-Tasten verursacht wird. Standardmäßig überprüft der number-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 den Fließpunkt einzuschränken. Wenn es weggelassen wird, sind nur ganze Zahlen gültig, da der step-Wert standardmäßig auf 1 gesetzt ist.

Schauen wir uns einige Beispiele an:

Dieses Beispiel erstellt eine Zahlsteuerung, deren gültiger Wert auf einen ungeraden Wert 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 Zahlsteuerung, deren Wert auf jeden Wert zwischen 0 und 1 einschließlich beschränkt ist und deren Erhöhungs- und Verringerungstasten ihren 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, um inkrementelle Erhöhungen sinnvoll zu gestalten (wie z.B. USA-PLZs, die von 00001 bis 99999 reichen), könnte der tel-Typ eine bessere Option sein; er bietet die numerische Tastatur, verzichtet jedoch auf das Spinner-UI-Feature der Zahl.

Eine andere Möglichkeit, eine Zahl auszuwählen, besteht darin, einen Schieberegler zu verwenden. Sie sehen diese ziemlich oft auf Webseiten wie Einkaufsseiten, auf denen Sie einen maximalen Immobilienpreis festlegen möchten, nach dem gefiltert werden soll. Lassen Sie uns ein Live-Beispiel anschauen, um dies zu veranschaulichen:

In der Praxis 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 den Wert range gesetzt ist. Der Schieberegler-Daumen kann über Maus oder Berührung oder mit den Pfeilen 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 Inkrementwerte festlegen.

Werfen wir einen Blick auf den Code hinter dem obigen Beispiel, damit Sie sehen können, 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 und der um jeweils 1000 erhöht/vermindert wird. Wir haben ihm einen Standardwert von 250000 gegeben, indem wir das value-Attribut verwendet haben.

Ein Problem bei Schieberegeln ist, dass sie keine visuelle Rückmeldung darüber liefern, welcher aktuelle Wert vorliegt. Aus diesem Grund haben wir ein <output>-Element eingefügt, 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 aufnehmen, das es Ihnen ermöglicht, es mit dem Element oder den Elementen zu verknüpfen, aus denen der Ausgabewert stammt.

Um den aktuellen Wert tatsächlich anzuzeigen und ihn bei Änderungen zu aktualisieren, müssen Sie JavaScript verwenden, was mit ein paar 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 die range-Eingabe und die output in zwei Variablen. Dann stellen wir sofort den textContent der output auf den aktuellen value der Eingabe ein. Schließlich wird ein Ereignislistener gesetzt, um sicherzustellen, dass jedes Mal, wenn der Bereichsregler bewegt wird, der textContent der output auf den neuen Wert aktualisiert wird.

Im Allgemeinen ist es für eine gute Benutzererfahrung beim Sammeln von Datums- und Zeitwerten wichtig, eine Kalenderauswahl-Benutzeroberfläche bereitzustellen. Diese ermöglichen es Benutzern, Daten auszuwählen, ohne in einen nativen Kalender zu wechseln oder sie möglicherweise in unterschiedlichen Formaten einzugeben, die schwer zu interpretieren sind. Die letzte Minute des vorherigen Jahrtausends kann auf die folgenden verschiedenen Weisen ausgedrückt werden: 1999/12/31, 23:59 oder 12/31/99T11:59PM.

HTML-Datumskontrollen sind verfügbar, um diese spezielle Art von Daten zu bewältigen und Kalender-Widgets bereitzustellen, wodurch die Daten einheitlich werden.

Eine Datums- und Zeitsteuerung wird mit dem <input> -Element und einem entsprechenden Wert für das type -Attribut erstellt, je nachdem, ob Sie Daten, Uhrzeiten 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: " ✓";
}

Lassen Sie uns die verschiedenen verfügbaren Typen kurz ansehen. Beachten Sie, dass die Verwendung dieser Typen ziemlich komplex ist, insbesondere in Bezug auf die Browserunterstützung (siehe unten); um die vollständigen Details zu erfahren, folgen Sie den unten stehenden Links zu den Referenzseiten für jeden Typ, die auch detaillierte Beispiele enthalten.

<input type="date"> erstellt ein Widget zum Anzeigen und Auswählen eines Datums (Jahr, Monat und Tag, ohne Uhrzeit).

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

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

<input type="datetime-local"> erstellt ein Widget zum Anzeigen und Auswählen eines Datums mit Uhrzeit ohne spezielle 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 zum Anzeigen und Auswählen eines Monats mit Jahr.

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

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

<input type="time"> erstellt ein Widget zum Anzeigen und Auswählen eines Zeitwerts. Während die Zeit möglicherweise im 12-Stunden-Format angezeigt wird, wird der zurückgegebene Wert im 24-Stunden-Format angezeigt.

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

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

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

Wochen beginnen am Montag und laufen bis Sonntag. Darüber hinaus enthält die erste Woche 1 jedes Jahres den ersten Donnerstag dieses Jahres – der möglicherweise nicht den ersten Tag des Jahres umfasst oder die letzten Tage des Vorjahres 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 durch 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 etwas schwierig zu handhaben. Es gibt viele Möglichkeiten, sie auszudrücken: RGB-Werte (Dezimal- oder Hexadezimalwerte), HSL-Werte, Schlüsselwörter usw.

Ein color-Steuerelement kann mit dem <input>-Element erstellt werden, dessen type-Attribut auf den Wert color gesetzt ist:

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

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

Das Klicken auf ein Farbauswahlsteuerelement zeigt im Allgemeinen die standardmäßige Farbauswahlfunktion des Betriebssystems an, um eine Farbe auszuwählen. Der zurückgegebene Wert ist immer eine kleingeschriebene, sechswertige Hexadezimalfarbe.

Damit kommen wir zum Ende unserer Erkundung der HTML5-Formulareingabetypen. Es gibt einige andere Steuerelementtypen, die aufgrund ihres sehr spezifischen Verhaltens nicht einfach gruppiert werden können, aber dennoch wichtig zu kennen sind. Wir behandeln diese im nächsten Artikel.

• Zurück
• Übersicht: Webformulare
• Weiter