Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5: Neue Formulartypen in der Praxis

    HTML5: Neue Formulartypen in der Praxis

Bisher war man es bei Eingabefeldern für Formulare gewohnt, zwischen wenigen Formulartypen zu wählen. Alles, was darüber hinaus ging, musste mit JavaScript dazuprogrammiert werden. Mit HTML5 gibt es nun eine ganze Reihe neuer Formularfelder, mit denen sich zum Beispiel Eingabefelder für E-Mail-Adressen sowie Datums- und Zeitangaben erstellen und prüfen lassen.

Eingabefelder für E-Mail-Adressen und URLs

Eines der interessantesten Eingabefelder ist wohl das für E-Mail-Adressen:

<input type="email" />

Es sieht zwar aus wie ein normales Eingabefeld. Das Besondere hierbei aber ist, dass vor dem Versenden des Formulars geprüft wird, ob es sich bei dem eingegebenen Wert auch um eine E-Mail-Adresse handelt. Man spart sich zukünftig also, client- oder serverseitig zu prüfen, ob die Eingabe eine E-Mail-Adresse ist.

Handelt es sich nicht um eine E-Mail-Adresse wird von Seiten des Browsers ein Tooltip am Eingabefeld dargestellt, der auf die ungültige Eingabe hinweist.

HTML5: Tooltip bei fehlerhafter Eingabe (links im Opera, rechts im Chrome)
HTML5: Tooltip bei fehlerhafter Eingabe (links im Opera, rechts im Chrome)

Ähnlich verhält es sich mit dem Eingabefeld für URLs. Auch das sieht wie ein normales Textfeld aus:

<input type="url" />

Auch hier erscheint ein Tooltip, wenn kein gültiger Wert eingegeben wurde. Während Firefox und Chrome allerdings eine URL mit Angabe des Protokolls erfordern – „www.t3n.de“ ist eine ungültige Eingabe, „http://www.t3n.de/“ eine gültige – akzeptiert Opera jede Eingabe, stellt allerdings dem versendeten Wert ein „http://“ davor – aus „gibtsnichts“ wird „http://gibtsnicht“.

Eingabefelder für Datums- und Zeitangaben

Für die Eingabe von Datums- und Zeitangaben gibt es gleich mehrere verschiedene Typen. Neben einem Typ für die Angabe von Datum und Zeit („datetime“) gibt es weitere Typen für Datum („date“), Monat („month“), Woche („week“) und Zeit („time“):

<input type="datetime" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />

Diese Eingabefelder werden vom aktuellen Firefox nicht unterstützt. Es werden nur einfache Textfelder dargestellt. Chrome unterstützt die Felder zwar, zeigt aber auch nur einfache Textfelder mit Auf- und Ab-Pfeilen an der Seite. Damit lässt sich der jeweilige Wert für die aktuelle Zeit im ISO-8601-Format einfügen und verändern.

Am Besten kann derzeit Opera mit Eingabefeldern für Datums- und Zeitangaben umgehen. Für die Eingabe von Datum und Zeit („datetime“) werden zwei separate Eingabefelder dargestellt. Bei dem Datumsfeld öffnet sich zur Eingabe ein Kalenderblatt, aus dem man ein Datum auswählen kann. Bei dem Zeitfeld werden zwei Pfeile eingeblendet, mit denen die Zeitangabe angepasst werden kann.

HTML5: Eingabefeld für Datum und Uhrzeit (im Opera)
HTML5: Eingabefeld für Datum und Uhrzeit (im Opera)

Es lassen sich auch Mindest- und Höchstwerte eingeben, um einen Zeitrahmen vorzugeben, innerhalb dessen sich das Eingabedatum beziehungsweise die -zeit befinden muss:

<input type="datetime" min="2011-12-01T00:00Z" max="2011-12-24T23:59Z" />

In dem Beispiel muss sich die Eingabe zwischen dem 1. und 24. Dezember 2011 befinden.

Eingabefelder für Zahlen

Für die Eingabe von Zahlen gibt es zwei unterschiedliche Typen. Neben der Eingabe von Zahlen über ein normales Eingabefeld mit Auf- und Abpfeilen („number“) gibt es einen zweiten Typ, bei dem über einen Schieberegler („rage“) ein Wert eingestellt werden kann:

<input type="number" min="5" max="100" />
<input type="range" min="5" max="100" />

In beiden Fällen können ein Mindest- und ein Höchstwert angegeben werden. Wird bei dem Schieberegler („rage“) kein Mindest- und Höchstwert eingegeben, lässt sich ein Wert zwischen Null und Hundert einstellen.

HTML5: Eingabefelder für Zahlen
HTML5: Eingabefelder für Zahlen

Auch diesen Typ unterstützt Firefox derzeit nicht. Opera und Chrome unterstützen ihn und geben eine Tooltip-Meldung heraus, wenn die Angabe außerhalb der Mindest- und Höchstangabe liegt. Wird eine nicht-numerische Eingabe gemacht, wird diese so behandelt, als sei das Feld nicht ausgefüllt.

Eingabefelder für Farben

Auch für die Eingabe von Farben gibt es ein spezielles Eingabefeld:

<input type="color" />

Unterstützt wird das Feld derzeit nur von Opera. Zur Eingabe wird eine Farbauswahl geöffnet, die man aus diversen anderen Anwendungen auch kennt. Übertragen wird der Farbwert als Hexadezimalwert mit der obligatorischen Raute (zum Beispiel „#ff0000“).

HTML5: Eingabefeld für Farben (im Opera)
HTML5: Eingabefeld für Farben (im Opera)

Nutzt ihr bereits die neuen Eingabefelder? Welche findet ihr nützlich, welche haltet ihr für verzichtbar? Und welche Formularfelder fehlen euch noch?

Weiterführende Links zum Thema HTML5:

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

13 Reaktionen
Willard Schleicher

We have employed on the blogroll and possess put your switch on my weblog aspect

Antworten
Fjonan
Fjonan

Ja, JS werden wir sicher nicht verschwinden sehen, selbst wenn alle Browser HTML 5 voll unterstützen. Allein für ein schönes intuitives GUI komm ich um AJax nicht herum (man denke z. B. an Suchmasken).

Ein schönes Aus-einem-Guss-System, welches genau eine Version erstellt die überall gleich aussieht ist noch weit weit weg.

Antworten
mega

Jo, schön wärs...
Ok, man könnte den User-Agent Server-Seitig abfragen.

Aber irgendwie glaube ich nicht dran, das man bald ohne JS-Framework auskommt. Entweder, um unfähigen Browsern was beizubringen oder um in richtigen/allen Browsern mehr Funktion zu bieten.
Und wenns nur ne Fancybox der ähnliche Bilder-Popups sind.

Antworten
Fjonan
Fjonan

Bei vernünftiger HTML Unterstützung bräuchte ich garkeine JS Library ;)

Antworten
mega

Nuja.
Man braucht doch nur mit JQuery die Browser-Version abfragen.
Wenn die nicht geeignet ist, wird eben ein jQuery-Datepicker oder Color-Picker geladen.

Antworten
Fjonan
Fjonan

Wir nur leider noch sehr spärlich unterstützt. Ich würde mir auch gern die Krux mit den tonnenweise Javascript und Plugins wie Datapicker oder Colorpicker sparen. Jetzt müsste ich vorher noch eine Browserweiche einbauen so nach dem Motto "Kann der das? Wenn nicht dann lade Javascript" und hab hinterher MEHR JS als vorher.

Sehr schade, ich kann es kaum erwarten, bis sich HTML 5 in seiner Gänze durchgesetzt hat.

Antworten
mega

Kleine Ergänzung:
Chrome tuts doch, aber erst beim Abschicken.
Bei Firefox kommt es, sobald das Feld gefüllt aber ungültig ist.

Antworten
mega

Gerade das eMail-Feld getestet:
Firefox 9.0 kann es: roter Rand und Tooltip, wenn falsch
Chrome 15 mach garnix

Der Android-Browser zeit eine angepasste Tastatur (mit @-Zeichen und ',com' Knopf). Ansonsten muss man erst umschaltet um das @ zu bekommen.

Antworten
Thomas Quensen

@Neue Typen Alle alten Browser, die die neuen typen nicht verstehen, zeigen einfach ein Text-Feld an, es spricht also nichts dagegen, die email oder url-Felder schon jetzt zu verwenden.
Alle Eingabefelder sind freiwillig, wenn man das Feld komplett leer lässt kann man das Formular also auch absenden, mit dem attribut "required" kann man beliebige Felder zu Pflichtfeldern machen, also eine Eingabe durch den Nutzer erzwingen (die bei email oder url Feldern dann natürlich auch gültig sein muss, bei text-Feldern reicht ein beliebiges Zeichen)

Antworten
Neue Typen
Neue Typen

Die Browser speziell am Handy müssten z.b. bei Email anbieten, diese aus den Kontaktdaten zu ziehen. Da muss man immer noch viel zu viel selbst eingeben.

Auf dem Server überprüfen muss man immer. Die könnten ja böse sein oder die Anfrage per Script zusammengefrickelt haben.

Gibt es kompatibilität für alte Browser um nur Text-Felder anzuzeigen ? dann könnte t3n hier bei Email-Adresse schon type=email einfügen.
Gibt es Mandatory bzw. freiwillige Eingabefelder ? So das man gewarnt wird, wenn man die Email-Adresse nicht angibt oder diese Felder in guten Browsern farbig hinterlegt sind, bis man sie ausfüllt. Freiwillige Felder bleiben dann z.b. weiss wäre nur mal so eine Idee.

Das Email-Feld ist mir schon mal untergekommen. Da kam dann ein Popup und ich wunderte mich, weil ich Javascript normalerweise ausgeschaltet haben.

Prinzipiell hätte man das alles schon vor 10 Jahren machen können.
Speziell AOLer haben immer nur ihren Screen-Name (ohne @aol.com) in Formulare eingegeben und man musste sich das dann dazuraten.

Antworten
passsy

nett, aber um die serverseitige Prüfung wird man nicht rum kommen. Bei kleinen, gerade mobilen Browsern ist es nicht sichergestellt, dass wirklich nur das gewünschte übertragen wird.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen