Elemente oder Input-Typen?

HTML5 bringt eine reihe neuer Elemente mit sich. Auch für Formulare sind unzählige dabei. Wir müssen hierbei jedoch zwischen neuen Elementen und neuen Typen des bereits bestehenden <input /> Elements unterscheiden. Formulare sind ja bekanntlich für die Interaktion mit dem Benutzer der Webseite gedacht. Das wohl wichtigste Element von Formularen ist das <input /> Element, welches wir mit dem Attribut type="" in seiner Funktionalität und seinem Aussehen komplett verändern können. Beschrieben wird die Idee dahinter wie folgt:

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

The type attribute controls the data type (and associated control) of the element. It is an enumerated attribute.

Das Input-Element repräsentiert ein typisiertes Datenfeld, welches dem Benutzer das Bearbeiten von Daten ermöglicht.

Das Type-Attribut steuert den zu bearbeitenden Datentyp des Elements.

Neue Elemente

Für Formulare wurden tatsächlich drei neue Elemente eingeführt, die kein typisiertes <input /> Element darstellen:

ElementBeschreibung
<datalist>Setzt vordefinierte Optionen für Input-Elemente
<keygen>Definiert ein Schlüssel-Werte-Paar Generator
<output>Definiert die Ausgabe einer Berechnung

Mit dem <datalist></datalist> Element haben wir in HTML5 die Möglichkeit dem <input /> Element eine Liste mit vordefinierten Daten mitzugeben. Diese werden dann als anklickbare Drop-Down Liste unter dem Element angezeigt und helfen bei der automatischen Vervollständigung von eingegebenen Begriffen.

  • Html
  • Ergebnis
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

Mit dem Attribut list="" des <input /> Elements wird auf die ID des <datalist></datalist> Elements verwiesen. Gibt der Benutzer nun einen Buchstaben ein, wird dieser mit den Werten des value="" Attributs vom leeren <option /> Element verglichen. Stimmt dieser mit dem Anfangsbuchstaben einer der Werte überein, so wird dieser Wert als Vorschlag genommen.

Das <keygen></keygen> Element können wir dazu benutzen ein Schlüssel-Werte-Paar zu generieren. Die Idee dahinter beruht auf einem Sicherheitsaspekt:

Heutzutage sind Server mithilfe von TLS (früher unter dem Namen SSL) abgesichert. Dafür verwenden sie ein Verfahren (handshake) bei dem sie sich mit einem sogenannten Zertifikat ausweisen. Das Verfahren soll hier nicht im Detail besprochen werden. Interessant ist jedoch der Punkt, an dem sich nicht nur der Server als "Original" ausweisen soll, sondern auch der Client (Browser). Dafür muss ein privater Schlüssel und ein öffentlicher Schlüssel generiert werden. Den privaten Schlüssel behält man auf seinem Computer, während der öffentliche an den Server zur Verarbeitung gesendet wird. Genau das erreichen wir mit dem <keygen></keygen> Element:

  • Html
  • Ergebnis
<form action="SERVER_SEITE.php"> Benutzername: <input type="text" name="benutzername" required /> Encryption: <keygen name="schluessel" keytype="rsa" /> <input type="submit" /> </form>

Das obige Beispiel sendet zum einen den Benutzernamen und zum anderen den öffentlichen Schlüssel, der mithilfe des <keygen></keygen> Elements generiert wurde:

SERVER_SEITE.php?name=Test&schluessel=MIICQDCCASI...

Folgende Attribute, können diesem Element mitgeben werden:

AttributBeschreibung
autofocusSetzt den Fokus automatisch auf dieses Element.
challengeDefiniert einen Challenge-String. Wird dieses Attribut nicht gesetzt, wird ein leerer Challenge-String mitgesendet.
disabledSperrt dieses Element.
formGibt eine oder mehrere Form-IDs an, für das dieses Element ein Schlüssel-Werte-Paar generieren soll.
keytypeDefiniert das Verschlüsselungs-Verfahren. Erlaubte Werte sind:

rsa
dsa
ec
nameDefiniert einen Namen für dieses Element.

Das <output></output> Element gibt das Ergebnis einer Berechnung wieder.

  • Html
  • Ergebnis
<form oninput="ergebnis.value = parseInt(wert1.value) + parseInt(wert2.value)"> <input name="wert1" type="number" > + <input name="wert2" type="number" > = <output name="ergebnis"></output> </form>

Im obigen Beispiel sind zwei Input-Felder vom Typ number definiert. Diese können nur Zahlen als Inhalt aufnehmen. Darunter ist das <output></output> Element definiert, welches wir mit Javascript ansteuern, um das Ergebnis anzuzeigen.

Events sind für HTML5 zwar keine grundlegende Voraussetzung. An dieser Stelle soll jedoch kurz auf das oninput Event eingegangen werden. Dem Event ist ein Javascript-Code gleichgesetzt. Dieser Code wird jedes Mal ausgeführt, wenn das Event oninput ausgeführt (unter Entwicklern: gefeuert) wird. Das passiert genau dann, wenn der Benutzer etwas in eines der Input-Felder schreibt.

Neue Input-Typen

HTML5 hat eine Vielzahl an neuen Input-Typen. Diese sind im Folgenden aufgeführt:

Input-TypBeispielBeschreibung
colorDefiniert eine Farbbox (color picker), aus der man eine Farbe generieren kann. Die ausgewählte Farbe wird als hexadezimaler Farbcode (Bsp.: #0000FF) gesendet.
dateDefiniert ein Input-Feld, dass ein Datum enthalten sollte.
datetimeDefiniert ein Input-Feld für Datums- und Zeitangaben.
datetime-localDefiniert ein Fenster zum Auswählen eines Datums.
emailDefiniert ein Input-Feld für E-Mail-Adressen. In manchen Browsern werden die Daten automatisch geprüft. Manche Smartphones fügen ein ".com" zur Tastatur hinzu.
monthDefiniert ein Fenster zum Auswählen von Monaten.
numberDefiniert ein Input-Feld, welches nur Nummern enthalten sollte. Die Nummern können eingegrenzt werden.
rangeDefiniert ein Input-Feld, dass eine Spanne zwischen zwei Zahlen anzeigt. In manchen Browsern wird dieser Typ als "Slider" angezeigt.
searchDefiniert ein Input-Feld, dass als Suchfeld benutzt werden sollte.
telDefiniert ein Input-Feld, welches für Telefonnummern benutzt werden sollte.
time
urlDefiniert ein Input-Feld für URLs. In manchen Browsern werden die Daten automatisch geprüft. Manche Smartphones fügen ein ".com" zur Tastatur hinzu.
weekDefiniert ein Fenster zum Auswählen von Wochen.