Feldtypen für kontrollierte Eingaben

Einzeilige Eingabefelder werden bei allgemeinem Inhalt durch <input type="text"> markiert. Eine spezielle, schon lange existierende Form ist die Variante <input type="password">, wobei die Eingaben verdeckt dargestellt werden. HTML5 stellt diesen beiden eine Reihe weiterer Typen an die Seite. Einige dieser Typen werden im Browser wie normale Texteingabefelder dargestellt. Sie lassen jedoch nur bestimmte Zeichen oder ein bestimmtes Zeichenfolgenformat zu. Andere der neuen Typen können auch als moderne Kombinationsfelder dargestellt werden, etwa die Feldtypen für Datumsauswahl.

Nachfolgende Tabelle listet die in HTML5 neu eingeführten Typen und ihre Bedeutung auf.

Notation in HTML Bedeutung FFOX CHROME SAFARI OPERA
<input type="tel"> Eingabefeld für Telefonnummern 6.0 13.0 5.1 11.5
<input type="url"> Eingabefeld für URL-Adressen 4.0 5.0 9.0
<input type="email"> Eingabefeld für E-Mail-Adressen 4.0 13.0 9.0
<input type="search"> Eingabefeld für Suchausdrücke 4.0 5.0 11.0
<input type="datetime"> Kontrollfeld für Datums-/Uhrzeitangabe inklusive Zeitzonenangabe 10.0 5.1 10.5
<input type="datetime-local"> Kontrollfeld für Datums-/Uhrzeitangabe ohne Zeitzonenangabe 10.0 5.1 10.5
<input type="date"> Kontrollfeld für Datumsangabe 10.0 5.1 10.5
<input type="time"> Kontrollfeld für Uhrzeitangabe 10.0 5.1 10.5
<input type="month"> Kontrollfeld für Angabe von Jahr und Monat 10.0 5.1 10.5
<input type="week"> Kontrollfeld für Angabe von Jahr und Kalenderwoche 10.0 5.1 10.5
<input type="number"> Textfeld für eine Zahl, eventuell mit Auswahlpfeilen (Spinner-Controls) 7.0 5.1 10.5
<input type="range"> Textfeld für eine Zahl, die in einem bestimmten Wertebereich liegen muss, eventuell unterstützt durch Schieberegler oder Ähnliches 4.0 4.0 10.5
<input type="color"> Kontrollfeld für eine RGB-Farbangabe in Form eines visuellen Farbauswahldialogs 11.0
<input pattern="…"> Eingabe, auf die ein regulärer Ausdruck passen muss 6.0 13.0 11.5

Beispiel

<form action="registrierung.exe" method="post">
<p><label>Name:<br>
<input type="text" name="name"></label></p>
<p><label>Website:<br>
<input type="url" name="website"></label></p>
<p><label>E-Mail:<br>
<input type="email" name="mail"></label></p>
<p><label>Telefon:<br>
<input type="tel" name="telefon"></label></p>
<p><label>Geburtsdatum:<br>
<input type="date" name="geburtstag"></label></p>
<p><label>Selbsteinschätzung (1 = Versager, 10 = Genie):<br>
<input type="range" min="1" max="10" step="1" name="bewertung"></label></p>
<p><label>Lieblingsfarbe:<br>
<input type="color" name="farbe"></label></p>
<p><label>Postleitzahl:<br>
<input pattern="[0-9]{5}" name="plz" title="5stellige Zahl!"></label></p>
<input type="submit" value="Absenden">
</form>

Erläuterung

Im Beispielformular kommt eine Reihe von Feldtypen für bestimmte Arten von Daten vor. Durch das type-Attribut wird der Feldtyp bestimmt. Alle in HTML5 neu hinzugekommenen Feldtypen können ebenso wie herkömmliche Formularfelder ein name-Attribut erhalten und mit Hilfe des value-Attributs vorbelegte Werte erhalten.

Im Zusammenhang mit type="range" können Sie mit den weiteren, neuen Attributen min, max und step den gewünschten Wertebereich und die darin möglichen Werte markieren. Mit min geben Sie den unteren Wert des Bereichs an, mit max den oberen. Mit step bestimmen Sie die Schrittweite (step = Schritt). Die Attribute min und max sind aber auch bei anderen Feldtypen erlaubt, wo eine Bereichseingrenzung sinnvoll sein kann, etwa bei type="date". Denn ein Geburtsdatum wie 23.10.1691 ist zwar formal korrekt, aber nicht realistisch. Mit min können Sie ein frühest mögliches Geburtsdatum bestimmen, mit max ein spätest mögliches.

Die neue Auszeichnung <input pattern="…"> erzeugt ebenso wie <input type="text"> ein einzeiliges Eingabefeld. Der Unterschied besteht darin, dass die Eingabe vom Browser gegen einen regulären Ausdruck geprüft werden soll. Im obigen Beispiel wird mit pattern="[0-9]{5}" die Eingabe einer genau fünfstelligen Postleitzahl erzwungen. Beachten Sie, dass der reguläre Ausdruck so formuliert sein muss, dass er die gesamte Eingabe abdeckt und nicht nur einen Teil davon. Notieren Sie den regulären Ausdruck ohne Begrenzerzeichen wie /…/. Das bedeutet aber auch, dass keine sogenannten Modifyer wie etwa der ignore-case-Modifyer möglich sind.
Die HTML5-Spezifikation fordert, bei Verwendung des pattern-Attributs in einem input-Element zugleich das globale Attribut title zu verwenden. Notieren Sie als Wertzuweisung an dieses Attribut eine kurze Beschreibung des erlaubten Inhalts. Die Beschreibung wird, wenn die Maus über das Feld bewegt wird, als Tooltipp-Fenster angezeigt.

Visualisierung im Browser

Zum Redaktionszeitpunkt hat die Implementierung der neuen HTML5-Feldtypen in den Browsern gerade erst begonnen. Nachfolgende Abbildungen zeigen ein paar Beispiele existierender Implementierungen.

Datumsauswahl (hier: Opera 10.5)

Bereichsauswahl (hier: Opera 10.5)

Eingabefeld für URL-Adressen (hier: Chrome 5)

Eingabefeld für Suchen (hier: Chrome 5)

Weitere Hinweise

Bei direkten HTML-Wertzuweisungen an die Attribute value, min und max sind folgende Regeln zu beachten (Beispiele verwenden das value-Attribut, gelten aber ebenso für min und max):

  • Datumsangaben:
    Beispiel: <input type="date" value="2010-10-23">
    Notieren Sie das Datum in der Form JJJJ-MM-TT.
  • Uhrzeitangaben:
    Beispiel: <input type="time" value="14:56"> oder <input type="date" value="14:56:40">
    Notieren Sie die Uhrzeit in der Form SS:MM oder SS:MM:SS. Optional könnnen Sie durch einen Punkt getrennt ein Millisekundenwert zwischen 0 und 999 anhängen.
  • Datums-/Uhrzeitangaben ohne Zeitzonenangabe:
    Beispiel: <input type="datetime-local" value="2010-10-23T14:56"> oder <input type="datetime-local" value="2010-10-23T14:56:40">
    Notieren Sie das Datum in der Form JJJJ-MM-TT, dahinter den Großbuchstaben T (für time), und dahinter die Uhrzeit in der Form SS:MM oder SS:MM:SS. Optional könnnen Sie durch einen Punkt getrennt ein Millisekundenwert zwischen 0 und 999 anhängen.
  • Datums-/Uhrzeitangaben mit Zeitzonenangabe:
    Beispiel: <input type="datetime" value="2010-10-23T14:56Z"> oder <input type="datetime" value="2010-10-23T14:56:40+0100">
    Notieren Sie das Datum in der Form JJJJ-MM-TT, dahinter den Großbuchstaben T (für time), und dahinter die Uhrzeit in der Form SS:MM oder SS:MM:SS. Optional könnnen Sie durch einen Punkt getrennt ein Millisekundenwert zwischen 0 und 999 anhängen. Dahinter folgt entweder der Großbuchstabe z (wenn die Zulu-Zeit bzw. Greenwich-Zeit gemeint ist), oder eine Angabe wie +0100 (Greenwich plus 1 Stunde) oder -0730 (Greenwich minus 7 Stunden 30 Minuten).
  • URL-Adressen:
    Beispiel: <input type="url" value="http://webkompetenz.wikidot.com/docs:html-handbuch">
    Notieren Sie eine absolute URL-Adresse, bestehend aus dem Schema (z.B. http://, dem Hostnamen, gegebenenfalls einer Portnummer, dem Pfad zur Ressource, und gegebenenfalls aus dem GET-Parameterstring und/oder Ankerangaben.
  • E-Mail-Adressen:
    Beispiel: <input type="email" value="michaela.mustermann@example.org">
    Gültige E-Mail-Adressen müssen laut HTML5-Standard der folgenden ABNF production genügen:
    1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )
    Die Syntax solcher ABNF productions wird auf http://www.ietf.org/rfc/std/std68.txt spezifiziert
    Der Teil atext entspricht der Definition in RFC 5322, Section 3.2.3:
    http://www.ietf.org/rfc/rfc5322.txt
    Der Teil ldh-str entspricht der Definition in RFC 1034, Section 3.5:
    http://www.ietf.org/rfc/rfc1034.txt
  • Monatsangaben:
    Beispiel: <input type="month" value="2010-11">
    Ein Monat wird in der Form JJJJ-MM angegeben.
  • Kalenderwochenangaben:
    Beispiel: <input type="week" value="2010-45">
    Eine Kalenderwoche wird in der Form JJJJ-WW angegeben. Kalenderwochen beginnen mit Montag. Ein Jahr hat maximal 52 oder 53 Kalenderwochen.
  • Farbangaben:
    Beispiel: <input type="color" value="#2245DA">
    Farben in der Form #XXXXXX angegeben. Jedes X entspricht einer hexadezimalen Ziffer. Hexadezimale Ziffern sind 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Anstelle von A bis F sind auch a bis f erlaubt. Die ersten beiden Ziffern stellen hexadezimal ausgedrückt den Rotwert der Farbe dar, die zweiten beiden Ziffern den Grünwert, und die dritten beiden Ziffern den Blauwert. Das voranstehende Gatterzeichen muss immer notiert werden. Viele Grafikprogramme, HTML-Editoren usw. können solche hexadezimale RGB-Farbangaben im Dialog erzeugen.
  • Zahlenangaben:
    Beispiel: <input type="number" value="-123"> oder <input type="number" value="0.3923"> oder <input type="number" value="2.1032e+18">
    Es kann sich um positive oder negative, mit Minuszeichen versehene Ganz- oder Fließkommazahlen handeln. Dezimalzeichen ist der Punkt. Ebenfalls erlaubt sind Zahlen in Exponentialschreibweise mit e+ oder E+ bzw. E- oder e-.

Für Telefonnummern sieht die HTML5-Spezifikation kein spezielles Format vor. Es wird empfohlen, zusätzlich ein pattern-Attribut einzusetzen. Beispiel: <input type="tel" pattern="\+\+[0-9\-]">. Dieser reguläre Ausdruck erlaubt beispielsweise Eingaben der Sorte ++4989119393934-334.

Referenzinformationen

HTML2 XHTML1 MSIE FFOX CHROME SAF OP
HTML5 XHTML5 CHROME SAFARI4.0 OPERA10.0

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License