Responsive Webdesign – Grundlagen

Richtiger Umgang mit Formularen

Testen Sie unsere 1951 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um Input vom Benutzer zu erhalten, greift man immer noch gerne zu Formularen. Und damit die Benutzer diese auch ausfüllen, sollten Sie es ihnen so einfach wie möglich machen ...

Transkript

Um Input vom Benutzer zu erhalten, greift man immer noch gerne zu Formularen. Und damit die Benutzer die Formulare auch ausfüllen, sollten Sie es ihnen so einfach wie möglich machen. Und dabei helfen die neuen in HTML 5 definierten Input-Typen. Außerdem können Sie die Darstellung der Formular-Elemente dank Media Queries unterschiedlich gestalten. Beginnen wir erst einmal mit der unterschiedlichen Darstellung je nach verfügbarem Platz. Bei kleinem Viewport bietet es sich an die Beschriftungen immer oberhalb des Input-Feldes anzuordnen so wie Sie es hier im Beispiel sehen. Das funktioniert dann auch, wenn sehr wenig Platz zur Verfügung steht. Das ist der Vorteil dieser Darstellung, also wenn wenig Platz in der Breite da ist. Wenn hingegen mehr Platz zur Verfügung steht, bietet es sich an die Formulare und die Beschriftungen nebeneinander anzuordnen. Also, so eine mehrspaltige Darstellung. Und das funktioniert beides recht einfach. Aber Sie dürfen natürlich nicht auf Tabellen zurückgreifen, sonst würde das nicht gehen. Schauen wir einmal an, wie diese unterschiedliche Darstellung realisiert wird. Ich habe hier unten mein Formular immer mit Label und Input-Feld. Das Label, das heißt die Beschriftung, die ist wichtig, damit es auch einen genauen Zusammenhang gibt zwischen eben dem, was man reinschreiben soll und dem eigentlichen Textfeld. Schauen wir einmal an wie die normale Darstellung - ich habe hier ein Mobile First-Ansatz gewählt, - aussieht. Da muss ich eigentlich nur, das Wichtigste hier ist die Beschriftungen zu Block-Elementen machen und dadurch werden die automatisch oberhalb der Input-Felder dargestellt, so wie Sie es hier sehen. Dann kann ich hingehen und bei einer gewissen Größe sowohl die Input-Felder, als auch die Beschriftungen zu inline-block Elementen machen und eine vernünftige Breite vorgeben. Und dann werden die nebeneinander angeordnet. Also, erster Punkt, schöne Möglichkeit über Media Queries die Formularfelder und ihre Beschriftungen je nach verfügbarem Platz unterschiedlich anzuordnen. Der zweite Punkt, den wir tun sollten beim Responsive Web Design von Formularen, ist folgender. Die Eingabe ist ja relativ mühsam auf dem Smartphone oder so und da ist es hilfreich, wenn man direkt in ein Feld klickt und dann die richtige Tastatur angezeigt bekommt. Es gibt ja verschiedene Tastatur-Layouts auf Smartphones. Und wenn ich zum Beispiel jetzt in ein E-Mail Feld klicke, dann ist es natürlich gut, wenn ich direkt auch das @-Zeichen habe um eine E-Mail eintragen zu können. Und genau das ermöglichen die neuen in HTML 5 definierten Formularfelder. Schauen wir uns das hier einmal an. In HTML 4.01 gibt es ja zur Eingabe von Text immer nur Textfelder. Und in HTML 5 ist das differenzierter. Sie sehen hier erstmal ein klassisches Textfeld für den Namen und bei dem nächsten Feld da soll jemand seine E-Mail Adresse eingeben, da habe ich jetzt das entsprechende E-Mail Feld aus HTML 5 gewählt. Sie sehen, ist hier einfach type="email". Für Telefon gibt es ebenfalls einen Typ, nämlich type="tel". Und es gibt einen Typ für type="url". Und das bewirkt dann immer, dass die korrekte Tastatur automatisch eingeblendet wird. Wenn ich das Formularbeispiel einmal auf einem iPad öffne, kann man die unterschiedlichen Tastatur-Layouts deutlich sehen. Im ersten Fall ist es ein normales Textfeld. Sie sehen, es sind einfach ganz normal die Buchstaben da zum Schreiben. Im nächsten Fall habe ich jetzt ein E-Mail Feld. Und jetzt hat eine kleine Umschaltung stattgefunden. Ich habe nämlich hier das @-Zeichen, sodass der Benutzer ganz leicht die E-Mail-Adresse eingeben kann. Kommen wir zum nächsten Feld, das Telefonfeld hier. Das ist von type="tel". Da hat sich auch wieder die Tastatur geändert und ich habe jetzt hier die Zahlen, um einfach eine Telefonnummer eingeben zu können. Wenn ich dann klicke auf Web-Seite, dann ist es ja ein Feld von type="url". Und Sie sehen, hier gibt es jetzt den Slash, den man braucht für Urls. Und es gibt hier zum Beispiel com, das heißt auch hier wurde es wieder optimiert, damit die Eingabe leichter geht. Die neuen Input-Felder bewirken aber auch eine automatische Überprüfung, ob die Inhalte stimmen. Und das ist nicht immer gewünscht. Ich zeige mal hier ein Beispiel. Also, ok, hier kann ich einfach einen Namen eingeben, dann muss ich eine E-Mail-Adresse eingeben, daran halte ich mich auch mal. Das könnte zumindest eine E-Mail-Adresse sein. Bei der Telefonnummer ist prinzipiell keine Überprüfung vorgesehen. Also, da kann ich irgendwas eingeben. Es könnte ich über das HTML 5 Pattern-Attribut, aber natürlich auch noch genauer bestimmen. Seien Sie nur vorsichtig, wenn Sie zu streng sind mit Telefonnummern, weil bei Telefonnummern natürlich wesentlich mehr möglich ist, als Zahlen. Spontan fällt mir da ein das Pluszeichen, runde Klammern, Minus, der Schrägstrich, Leerzeichen und vielleicht noch andere Sachen. Und jetzt gebe ich mal hier auch eine Web-Seite an und schicke das Ganze ab. Und dann sehen Sie hier hat eine Überprüfung stattgefunden und ich bekomme die Meldung: Bitte geben Sie eine URL ein. Ich habe aber eine URL eingegeben. Das liegt daran, dass vorgesehen ist automatisch beim Input type="url", dass man eine vollständige URL mit http eingibt. Jetzt zum Beispiel wurde das Ganze akzeptiert. Da gibt es jetzt mehrere Möglichkeiten. Das kann natürlich passend sein, weil Sie auch wollen, dass die Leute das wirklich ganz sauer mit http machen. Sie können denen vielleicht auch einen Hinweis geben. Sie könnten an sich über HTMl 5 ein besonderes Pattern auch definieren und sagen: ich erwarte Eingaben und die sollen so und so aussehen. Dann würde das gelten. Die andere Möglichkeit, was aber auch manchmal sinnvoll sein kann, ist dass Sie diese automatische Überprüfung einfach ausschalten. Und dafür müssen Sie ergänzen in Form Starttag, novalidate ist gleich novalidate. Und das mache ich jetzt mal: novalidate="novalidate". Ich wähle jetzt diese von XHTML bekannte Schreibweise, man könnte das natürlich auch einfach als novalidate schreiben. Wenn wir das Formular jetzt noch einmal aufrufen und ich gebe wieder meine Adresse von eben ein ohne http und ich schicke es ab, dann wird das akzeptiert. Also, mit novalidate="novalidate" können Sie diese automatische Überprüfung deaktivieren, wenn sie nicht passen sollte. In diesem Film haben Sie zwei Sachen gesehen. Zum Einen, haben wir uns angeschaut, wie wir die Formularelemente unterschiedlich anordnen können je nach verfügbarem Platz. Und das Andere, womit wir uns beschäftigt haben, sind die neuen Input-Felder aus HTML 5, die wichtig sind, weil dadurch auf Smartphones immer das richtige Tastatur-Layout angezeigt wird.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-99032-060-0
Erscheinungsdatum:10.09.2013
Aktualisiert am:26.09.2016
Laufzeit:5 Std. 47 min (59 Videos)

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!