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.
Ä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.
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.
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“).
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:
- Popcorn – HTML5-Tool zum Erstellen interaktiver Webvideos - t3n-News
- HTML5: Neue Aufgaben für die Elemente SMALL, B und I - t3n-News
- Mobile HTML5-Entwicklung für iOS mit mehr Features, dank MobiUs - t3n-News
- HTML5: Eigene Attribute für Elemente erstellen - t3n-News
- HTML5-Howto: Aufklappboxen ohne JavaScript - t3n-News
18 Answers
von passsy 29.11.2011 (15:11Uhr) 1.
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.
von Neue Typen 29.11.2011 (15:54Uhr) 2.
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.
von Thomas Quensen 29.11.2011 (16:06Uhr) 3.
@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)
von mega 29.11.2011 (17:31Uhr) 4.
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.
von mega 29.11.2011 (17:37Uhr) 5.
Kleine Ergänzung:
Chrome tuts doch, aber erst beim Abschicken.
Bei Firefox kommt es, sobald das Feld gefüllt aber ungültig ist.
von Thomas Weise 29.11.2011 (20:03Uhr) 6.
passt ganz gut zum Thema:
von Thomas Weise 29.11.2011 (20:04Uhr) 7.
sorry, Link vergessen:
von KW48: Google-Story, Weihnachts-Wallpaper… 02.12.2011 (09:43Uhr) 8.
[...] t3n findet ihr mal ein paar Beispiele von Steuerelementen, die HTML5 von Haus aus mitbringen bzw. [...]
von HTML5: Neue Formulartypen in der Praxis… 05.12.2011 (15:58Uhr) 9.
[...] HTML5: Neue Formulartypen in der Praxis » t3n News [...]
von Fjonan 07.12.2011 (16:50Uhr) 10.
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.
von mega 07.12.2011 (19:51Uhr) 11.
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.
von Fjonan 07.12.2011 (19:53Uhr) 12.
Bei vernünftiger HTML Unterstützung bräuchte ich garkeine JS Library ;)
von mega 07.12.2011 (19:57Uhr) 13.
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.
von Fjonan 07.12.2011 (20:01Uhr) 14.
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.
von 7 Links, die ich noch loswerden wollte (… 11.12.2011 (14:05Uhr) 15.
[...] angepasste Input-Felder für E-Mail-Adressen und Datum-Angaben einführen - mehr dazu unter t3n.de. b) Sicherheitsexperten warnen, dass mit HTML5 auch neue Sicherheitsrisiken entstehen werden - [...]
von HTML5 und Local Storage: Daten für Offl… 12.12.2011 (11:17Uhr) 16.
[...] HTML5: Neue Formulartypen in der Praxis [...]
von HTML5: Überschriften und Einleitungen v… 20.12.2011 (10:08Uhr) 17.
[...] HTML5: Neue Formulartypen in der Praxis [...]
von HTML5: Eingabefeld mit Vorschlägen als… 09.01.2012 (14:45Uhr) 18.
[...] HTML5: Neue Formulartypen in der Praxis - t3n News [...]