t3n News Entwicklung

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 dazuprogrammiert werden. Mit 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.

HTML5: Neue Formulartypen in der Praxis

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:

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
13 Antworten
  1. von passsy am 29.11.2011 (15:11 Uhr)

    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 Teilen
  2. von Neue Typen am 29.11.2011 (15:54 Uhr)

    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 Teilen
  3. von Thomas Quensen am 29.11.2011 (16:06 Uhr)

    @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 Teilen
  4. von mega am 29.11.2011 (17:31 Uhr)

    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 Teilen
  5. von mega am 29.11.2011 (17:37 Uhr)

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

    Antworten Teilen
  6. von Thomas Weise am 29.11.2011 (20:03 Uhr)

    passt ganz gut zum Thema:

    Antworten Teilen
  7. von Thomas Weise am 29.11.2011 (20:04 Uhr)

    sorry, Link vergessen:

    Antworten Teilen
  8. von Fjonan am 07.12.2011 (16:50 Uhr)

    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 Teilen
  9. von mega am 07.12.2011 (19:51 Uhr)

    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 Teilen
  10. von Fjonan am 07.12.2011 (19:53 Uhr)

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

    Antworten Teilen
  11. von mega am 07.12.2011 (19:57 Uhr)

    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 Teilen
  12. von Fjonan am 07.12.2011 (20:01 Uhr)

    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 Teilen
  13. von Willard Schleicher am 11.07.2012 (08:09 Uhr)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema HTML5
So schreibst du die perfekte E-Mail an einen Investor
So schreibst du die perfekte E-Mail an einen Investor

Wie begeistert man einen Geldgeber per E-Mail für seine Idee? Ein begehrter Frühphasen-Investor hat dies jetzt verraten. Vorweg: Bitte nicht nach einem Telefonat fragen.  » weiterlesen

Drei Jahre nach Snowden: E-Mails an @spd.de nicht abgesichert
Drei Jahre nach Snowden: E-Mails an @spd.de nicht abgesichert

Der Berliner E-Mail-Anbieter Posteo warnt: Unverschlüsselte E-Mails an die Domain @spd.de können nicht sicher übertragen werden. Auch andere bekannte Domains sind betroffen. » weiterlesen

Wikileaks veröffentlicht E-Mails der Erdoğan-Partei AKP und wird in der Türkei gesperrt
Wikileaks veröffentlicht E-Mails der Erdoğan-Partei AKP und wird in der Türkei gesperrt

Wikileaks veröffentlicht E-Mails der türkischen Erdoğan-Partei. Zuvor legte eine DDoS-Attacke die Seite lahm. Inzwischen ist Wikileaks in der Türkei gesperrt. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?