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

Formularfelder anordnen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Für die Anordnung von Formularfelder wollen manche noch zu HTML-Tabellen greifen – dabei geht es mit CSS besser und Sie können das Formular auch responsiv umsetzen.

Transkript

Bei der Anordnung von Formularelementen könnte man versucht sein, auf Tabellen zurückzugreifen. Dabei geht es mit CSS besser und wir können die Formularelemente je nach verfügbarem Platz auch unterschiedlich platzieren. Sie sehen, hier kann ich unterschiedliche Anordnungen machen. Wie funktioniert das Ganze? Das Formular beinhaltet ein paar andere Formatierungen, aber für die Anordnung zentral sind folgende. Ich möchte, wenn wenig Platz zur Verfügung steht – im Beispiel verfolge ich den Ansatz mobile first, so dass ich mich also zuerst um die Formatierung für kleine Geräte kümmere. Also, bei wenig verfügbarem Platz sollen die Beschriftungen Blockelemente werden. Das erreiche ich über display: block. Die Labels stehen immer in Elementen mit class="textfeld". Denn ich möchte die Anordnung, dass die Beschriftungen oberhalb sind, natürlich nur bei Textfeldern haben, aber zum Beispiel nicht, wenn ich Radio Buttons habe. Deswegen ist das nicht global für Label festgelegt. Damit steht diese Anordnung einfach nur über display: block. Ich muss die Anordnung natürlich ändern, wenn mehr Platz zur Verfügung ist. Dafür brauche ich Media Queries. Ich sage, ab einer Mindestbreite von 600 Pixeln, den Wert muss man natürlich jeweils anpassen, was gerade für das aktuelle Layout stimmt, da möchte ich für meine Input-Felder als auch für meinen Submit-Button eine andere Anordnung. Die sollen zu Inline-Block-Elementen werden und eine Breite von 70 Prozent haben. Dann sollen auch die Label-Elemente nicht mehr display: block haben, sondern display: inline-block. Damit sind diese beiden Elemente nebeneinander angeordnet. Die Labels erhalten auch noch eine Breite, im Beispiel von 20 Prozent. Und wir haben diese Anordnung nebeneinander. Sie haben am Beispiel gesehen, responsive Formulare sind ganz rasch erstellt. Die Magie liegt in der Eigenschaft display. Bei wenig verfügbarem Platz mache ich die Beschriftung zu Blockelementen, über display: block. Wenn mehr Platz zur Verfügung steht, kann ich Input-Elemente und Label-Elemente über display: inline-block nebeneinander anordnen.

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)
DS
Gute Beispiele und anschaulich erklärt. Wenn man sich nicht ständig mit Formularen beschäftigt, erfährt man einige nützliche Dinge, die den nächsten Entwurf von Formularen auf jeden Fall bereichern.
 

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!