Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 für Webdesigner

Neue Felder für E-Mail-Adressen, Telefonnummern und URLs

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In HTML5 stellt Formularfelder für E-Mail-Adressen, Telefonnummern und absolute Webadressen bereit. Gerade auf mobilen Geräten sind diese Felder recht praktisch.

Transkript

In diesem Film möchte ich Ihnen zeigen, was HTML5 noch an Besonderheiten bietet - insbesondere die neuen Input-Typen. Input type="text" kennt jeder, aber es gibt noch ein paar mehr. Wenn Sie unser Formular hier betrachten sehen Sie: Da gibt es Felder für Email, Telefon und Homepage. Das ist natürlich kein Zufall, denn im Quelltext ist momentan hier noch alles "Type text", "Type text", "Type text" - aber es gibt jetzt tatsächlich, nach fast 20 Jahren Worldwide Web, ein Feld für Email, und das heißt "email". Der Unterschied ist: Input type="email". Der Rest bleibt völlig gleich. Das ist das Einzige, was sich ändert. Es ist jetzt gespeichert, rüber in den Browser - und es ändert sich überhaupt gar nichts. Das erste, das sich hier am Desktop ändert, ist: Wenn ich das Formular ausfülle und hier einen Namen reinschreibe (hier irgendwas reinschreibe), dass der Browser tatsächlich guckt: Ist da eine Email-Adresse oder nicht?. D.h., er schaut hier hin - so ganz genau überprüft er das natürlich nicht. Aber er guckt zumindest: Ist da ein @-Zeichen drin? Könnte der Aufbau eine Emailadresse sein? Wobei es dabei so vielfältige Möglichkeiten gibt, dass es fast unmöglich ist, das komplett zu überprüfen. Vor allem überprüft der Browser nicht, ob der Besucher tatsächlich dieses Email-Postfach besitzt, ob er es liest, ob er es leert usw. usf. - aber es ist besser als nichts. Das ist gleich mitgeliefert. Die meisten Browser - die meisten modernen Browser - machen das vollautomatisch. Man muss dafür kein JavaScript mehr einsetzen. Zurück zum Editor: Ganz ähnlich gibt es hier für Telefonnummern das Feld "Tel" Da wird nicht so viel überprüft - höchstens, ob da Zahlen drin stehen. Und für Homepages, also für Webadressen, gibt es die Type "url", für absolute Webadressen. Bei der "Text Area" ändert sich nichts und beim "Abschicken" erst mal auch nichts, aber wir haben die Typen "email", "tel" und "url". Hier ändert sich wenig bis gar nichts - wir können das abschicken, wir können das ausfüllen. Aber gleich, in mobilen Geräten, wird das noch sehr viel interessanter. Jetzt dürfte dem Abschicken eigentlich nicht mehr viel im Wege stehen, und Sie sehen: Das hat ganz wunderbar geklappt. Soweit am Desktop. Auf mobilen Geräten sieht das ein kleines bisschen anders aus. Ich habe hier einen "IOS-Simulator" abfotografiert: Das ist ein iPhone - ein virtuelles iPhone - und das ist ein Email-Feld von unserem Formular, aktiviert - auch wenn der Cursor hier nicht blinkt -aber es ist eine ganz normale Tastatur untendrunter. D.h. also, das ist die ganz normale Tastatur. Die kommt, wenn ein ganz normales Textfeld kommt, und das steht auch drunter. Da steht zwar "Email" dran, aber es ist ein "Textfeld" drin. Wenn ich jetzt im Quelltext "Input type="text" zu "Input type="email" ändere, dann sieht man ganz deutlich: Hier unten wird die virtuelle Tastatur dem angepasst, d.h. also, "Input type="email" bringt für die Benutzer automatisch die Zeichen, die er bei Email-Adressen braucht: Ein @-Zeichen und einen Punkt. Genauso ist es bei "Input type="tel". Falls Ihnen nicht aufgefallen ist, wo sich die Tastatur ändert, habe ich das hier noch einmal rot umrandet. D.h., sobald hier ein "type tel"-Feld kommt, wird nur noch die Telefonnummer erwünscht - d.h., hier gibt es im Wesentlichen nur noch Zahlen. Bei "url" sieht das ähnlich aus: Bei Webadressen Typ "url" wird hier unten //.com - wenn man länger draufdrückt, kommen andere Toplevel-Domains - und ein Punkt geliefert. D.h., der Mehrwert für diese neuen Input-Felder wird auf mobilen Geräten besonders deutlich. Zusammenfassend können wir sagen: Es gibt neue Eingabefelder - "type email", "type tel", "type url" - und es gibt auch noch "Input type="search" für Suchfelder, die etwas schwierig zu gestalten sind, und "Input type="Number" für Zahlen, wobei da die Browser-Unterstützung noch ein bisschen mäßig ist. Aber die oberen drei können Sie einsetzen. Wenn die Browser diese Felder nicht kennen - ältere Browser wie  IE 7, 6, 5, 4 usw. - dann nehmen die ein ganz normales "Input type="text". D.h., Sie haben nichts verloren; Sie können nur gewinnen, wenn Sie diese Typen einsetzen. Es gibt wirklich keine Nachteile dabei. Ich wünsche Ihnen viel Spaß bei den nächsten Formularen!

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!