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 Grundkurs

URL, Email, Telefon

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Eingabe von URLs, E-Mail-Adressen und Telefonnummern wird von zahlreichen mobilen Endgeräten durch spezielle Eingabemechanismen wie etwa angepassten Bildschirmtastaturen, z.B. mit @-Tasten bei E-Mails, unterstützt. HTML5 bietet jetzt Support dafür.
06:30

Transkript

Hinsichtlich semantischer Informationen gibt es eine kleine Menge von Formularfeldern, deren Sinnhaftigkeit sich möglicherweise erst etwas später ergibt und zwar hat das wieder mit mobilen Endgeräten zu tun. Schauen wir uns die Felder einmal an. Zum einen möchte ich sprechen über 'tel' das ist ein Feld für eine Telefonnummer, dann 'ulr' für Webadressen klar, entsprechend wieder mit dem InputType und abschließend noch 'e-mail', also ein E-Mail-Feld. Soweit glaube ich so gut und so verständlich, schauen wir uns das Ganze mal an nehmen wir wieder den Chrome, ändern die Adresse auf "formular.html". Ja, drei Textfelder, das ist jetzt noch nicht so spannend. Was ist denn das überhaupt für eine Information, 'tel' für Telefonnummer, 'url', 'e-mail', weil die Eingabe ist da ja immer ein einzeiliges Textfeld, zumindest in fast allen Fällen im Web, klar wir haben wieder semantische Informationen. Das heißt, eigentlich bedeutet die Verwendung von Typ gleich 'tel', 'url' oder 'e-mail' nur, dass wir den Webbrowser einen Hinweis geben - Achtung semantische Informationen, hier kommt eine Telefonnummer rein, hier kommt eine URL hinein, hier kommt eine E-Mail-Adresse rein. Diese Information kann dann vom Browser irgendwie verarbeitet werden. Man könnte sich beispielsweise vorstellen, dass die Telefonnummer vielleicht auf Basis des Profils auf einem mobilen Endgerät automatisch vorausgefüllt wird mit der eigenen Telefonnummer. Nun genau das wird wahrscheinlich nicht passieren, allein schon aus Datenschutzgründen, aber das mit dem mobilen Endgerät ist schon mal ein ziemlich nützlicher und ein ziemlich guter Tipp. Ich kopiere die URL mal in die Zwischenablage und rufe einen anderen Browser auf und zwar der Opera Mobile Emulater, bislang nur die Emulator und wir haben dort jetzt nicht exakt die Funktionalität, wie wir sie auf einem tatsächlichen Telefon haben würden, aber vielleicht bekommen wir da einfach die Idee wohin es geht. Nehmen wir zum Beispiel mal einen Kindle Fire, starten dann den ensprechenden Emulator und kopieren die URL hier hinein, rufen sie auf, zoomen ein bisschen hinein, Wie würden das den laufen auf so einem mobilen Endgerät, wenn ich jetzt beispielsweise eine E-Mail-Adresse eingeben müsste. Ja genau, da kommt so eine Tastatur hoch und dann gebe ich irgendeine E-Mail-Adresse ein, da muss ich den Klammeraffen eingeben. Wo ist den hier der Klammeraffe? Schwer zu sagen, vielleicht bei den Sonderzeichen. Also ist er bei den Zahlen, tatsächlich hier ist ein Klammeraffe und dann gehe ich wieder zurück, und dann gebe ich das weiter ein, ich meine, ich tue das jezt hier mit dem Maus, das heißt, das läuft nicht besonders gut, mit meinen Fingern würde es möglicherweise besser laufen, aber hängt auch ein bisschen davon ab wie eng die Tastatur ist. Kennen Sie vielleicht auch, wenn Sie mit verschiedenen mobilen Betriebssystem arbeiten. Gut das heißt, also ich habe eine Eingabe über Finger und ich habe eine Tastatur, das ist eine Standardtastatur. Buchstaben, Leerzeichen, Punkt, Schrägstrich, was man halt so häufig braucht. Und das ist der interessante Punkt. Wir sehen, dass jetzt hier die Tastatur immer dieselbe ist. Auf einem tatsächlichen mobile Endgerät aber kann der mobile Webbrowser diese semantische Informationen, "Hallo, es ist eine E-Mail Adresse", "Hallo, es ist eine URL", "Hallo, es ist eine Telefonnummer", direkt umsetzen,, indem beispielsweise spezifische Tastaturen angeboten werden. Die können Sie mal testen mit ihrem mobilen Endgerät und Sie werden feststellen, beim E-Mail-Feld bekommen Sie in der Regel, wenn Sie Input-Type gleich 'e-mail' verwenden, nicht beim Textfeld , da hat der Browser keine Ahnung was reinkommt. Beim E-Mail-Feld enthält die Tastatur gleich den Klammeraffen, ohne dass Sie umschalten müssten, auf irgendeine der Sonderzeichen Feldbelegungen. Ditto bei der URL, möglicherweise ist Doppelpunkt und Schrägstrich bereits vorhanden und zwar standardmäßig auf der Tastatur, hier immerhin der Schrägstrich, aber auch der Doppelpunkt wenn Sie im URL-Feld. Bei der Telefonnummer möglicherweise sind die Ziffern automatisch sichtbar und vielleicht noch ein paar Sonderzeichen, denn Telefonnummern sind schwierig. Telefonnummern gibt's in so vielen Formaten. Das ist in verschiedenen Ländern so unterschiedlich, in den USA ist es einigermaßen reglementiert, auch wie viele Ziffern erlaubt sind, aber in anderen Ländern, wissen Sie es selber, Vorwahl kann fast beliebige Länge haben. Die Telefonnummern erst recht, vor allem, wenn man eine Telefonanlage hat, mit sehr viel Nebenstellen. Insofern also bleibt festzuhalten, dass bei diesen Feldern tatsächlich das mobile Endgerät den Nutzer unterstützen kann, eben indem eine spezifische Tastatur angezeigt wird. Glauben Sie mir, wenn Sie das mal ausprobiert haben und dann mobil sich auf Webanwendungen bewegen und Webanwendungen verwenden und dort Formulare ausfüllen, es fällt Ihnen irgendwann ganz stark auf, ob jetzt Entwickler von einer Webapplikation, von so einem Formular, Input-Type gleich 'e-mail' verwendet haben oder nur ein normales Textfeld, allein durch die Tastatur. Was folgt daraus für uns, natürlich wir verwenden ab jetzt Input-Type gleich 'e-mail' für ein E-Mail- Feld. Einem normalen Desktop Nutzer fällt zunächst nichts auf, es gibt noch den Aspekt Validierung, aber ansonsten ist das dasselbe einzeilige Textfeld vorher. Ein mobiler Benutzer, also jemanden mit dem Smartphone oder einem Tablet, der bekommt eine Bildschirmtastatur, die auf E-Mail-Adressen, um beim Beispiel zu bleiben, optimiert ist und deswegen kann E-Mail-Adresse viel bequemer eingegeben werden. Gleiches bei 'url', 'urls' können bequemer angegeben werden. Ich nenne so was ganz gerne einen Quick-Win, also sozusagen einen schnellen Sieg, denn wenig Aufwand gepaart mit einem sehr sehr guten Ergebnis. Wie gesagt, Desktop Nutzer bemerken quasi kein Unterschied und mobile Nutzer, die haben eine deutlich verbesserte Bedienung an der Stelle. Und genauso ist das Telefon-Feld mit Einschränkungen, aber vor allem das URL-Feld und das E-Mail-Feld zu sehen. Gerade E-Mail-Felder hat man ganz ganz oft in Webformularen und und deswegen gibt es eigentlich fast keine Ausrede mehr, ein E-Mail-Feld mittlerweile anzubieten, ohne dass Input-Type gleich 'emsil' verwendet wird. Diese semantische Information kann der Browser, wie bereits angesprochen, auch zur Validierung verwenden. Separates Thema, aber gerade das Anbieten von so einer spezifischen Tastatur ist etwas, was den Einsatz von eben Input-Type gleich 'e-mail' und natürlich auch 'type gleich url' und 'type gleich tel' geradezu einem aufdrängt.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 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!