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.

Formulare mit HTML und CSS

Mehr input-Felder mit HTML5

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
HTML5 definiert eine Reihe von neuen input-Feldern: etwa speziell für E-Mail-Adressen, URLs oder Datumsangaben. Außerdem gibt es range für Bereiche und number für Zahlen oder date fürs Datum.

Transkript

In HTML 4.01 können Sie immer nur input type="text" verwenden. Unabhängig davon, was der Benutzer da jetzt reinschreiben soll, ob er seinen Namen reinschreiben soll, eine E-Mail-Adresse, Webadresse et cetera. Mit HTML 5 kann man da gottseidank differenzieren. Sehen wir uns das praktisch einmal an. Sie können mit HTML 5 angeben, wenn der Benutzer eine E-Mail-Adresse reinschreiben soll, input type="email". Sonst funktioniert das ganz normal wie ein Textfeld. Sie können ebenfalls angeben input type="url", wenn es für eine Webadresse gedacht ist, input type="tel" für Telefonnummer oder input type="search" für ein Suchfeld. Warum verwendet man die? Sie haben ja eben gesehen, E-Mail-Adresse, Web-Adresse, Telefonnummer zum Beispiel, die sehen ja ganz normal aus. Der Vorteil ist, wenn Sie diese Felder verwenden, dass auf einem Smartphone gleich die richtige Tastatur angezeigt wird. Beim E-Mail-Feld zum Beispiel dann eine Tastatur mit dem @-Zeichen. So muss der Benutzer nicht auf eine andere Tastatur umschalten. Das ist auf jeden Fall sehr praktisch. Dann gibt es in HTML 5 weitere Felder. Es gibt ein Inputfeld type="date" für die Eingabe eines Datums. Man könnte auch week, month, datetime oder datetime-local angeben. Es gibt input type="color" zur Farbwahl. Sehen wir uns die Farbwahl einmal an. Dann erscheint diese Farbauswahl. Es gibt außerdem ein input type="number". Da können Sie dann auch einen Mindestwert, einen maximalen Wert und mit step die Schritte angeben. Sehen wir uns das nochmal im Browser an. Wenn ich jetzt beginne, hat es den Mindestwert. Es wird immer in Zweierschritten hochgezählt bis zu meinem Maximalwert. Es sind auch diese kleinen Pfeile nach oben und unten erschienen. Number ist das richtige Feld, wenn es um einen exakten Wert geht, den man eingeben soll. Wenn es hingegen um so ungefähre Angaben geht, zum Beispiel bei einer Lautstärkeregelung, dann ist type="range" das Richtige. Sehen wir uns das einmal an. Firefox stellt das so dar. Die letzten Felder Datum, Farbe, Zahl, Bereich, haben die Besonderheit, dass, wenn ein Browser es unterstützt, dann auch wirklich ein entsprechendes Widget angezeigt wird. Sehen wir uns das einmal im Chrome an. Da haben wir das Datumsfeld besonders gekennzeichnet. Wenn ich da draufklicke, kann ich wirklich auf diese Art ein Datum wählen, mich durch die verschiedenen Monate klicken, et cetera, oder das auch auf eine andere Art wählen. Das ist ein richtiges Widget, was hier integriert wird. Das ist der Farbwähler. Der Bereich wird so gemacht, die Zahl, da erscheinen die kleinen Pfeile erst, wenn ich da mit der Maus drüberhovere. Sehen wir uns das mal im Internet Explorer an. Dann finden sich hier keine Besonderheiten. Aber bei diesem Bereich gibt es ein besonderes Widget, was da eingesetzt wird. Prinzipiell kann man die neuen Inputfelder aus HTML 5 zweiteilen. Es gibt manche, die Sie jederzeit einsetzen können. Das sind auf jeden Fall E-Mail-Adresse, Web-Adresse, Telefon und Suchfeld. Die anderen Felder, wie Datum, Farbe, Zahl und Bereich, werden in den Browsern, sofern es unterstützt wird, besonders dargestellt. Da müssen Sie, bevor Sie diese einsetzen, einfach schauen, wie es mit der Browserunterstützung bei Ihren relevanten Browsern aussieht. Sie müssen auch schauen, ob Sie damit leben können, dass die Darstellung unterschiedlich ist. Diese ganzen Nachteile und das zusätzliche Überlegen haben Sie bei den einfachen Inputfeldern wie E-Mail- und Web-Adresse, Telefon, Suchfeld, nicht. Die würde ich unbedingt einsetzen. Der Vorteil ist eben, dass Smartphone-Nutzer automatisch die richtige Tastatur angezeigt bekommen.

Formulare mit HTML und CSS

Lernen Sie Formulare mit HTML zu erstellen und wie die Formatierung von Formularen und die responsive Anordnung der Felder vonstatten geht.

1 Std. 16 min (19 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!