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

Besonderheiten von Formularfeldern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Manche Dinge funktionieren in Formularen anders – beispielsweise hat die bei body deklarierte Schriftfarbe keine Auswirkung auf input-Felder und einiges mehr. Hier erfahren Sie, wie Sie solche Probleme lösen.

Transkript

Manche Dinge funktionieren in Formularen einfach anders. Was man da machen kann, sehen wir uns an. Ich habe ein Formular mit verschiedenen Feldern. Außerdem habe ich für body definiert eine Schriftfarbe, Schriftart und Schriftgröße. Die Schriftfarbe zum Beispiel wird vererbt an die Kind-Elemente und Nachfahren. Ich könnte also erwarten, dass in meinem Formular auch alles blau ist. Sie sehen, das funktioniert bei den Beschriftungen. Das funktioniert allerdings nicht bei den Feldern und auch nicht bei meiner Auswahlliste. Das ist so eine Besonderheit, dass bestimmte Elemente in Formularen nicht die allgemeinen Formatierungen erben. Das ist natürlich irritierend und es gibt noch viele weitere Besonderheiten von Formularen. Deswegen empfiehlt sich da prinzipiell, etwas zu machen. Der beste Weg ist, dass man eine Normalisierung durchführt. Normalisierung geht über die Datei normalize.css. Die können Sie herunterladen und einbinden. Ich hab sie schon heruntergeladen und werde sie einbinden. Diese CSS-Datei setzt einfach bestimmte Formatierungen, die von den einzelnen Browsern kommen, auf einen vernünftigen Standard. Damit sind auch viele Probleme, die es bei Formularen gibt, behoben. Ich muss das dann hier einbinden. Sehen wir uns das jetzt nochmal an. Da ist es: blau. Das Problem, das wir eben mit der Schrift hatten, ist nicht mehr da. Aber normalize löst natürlich nicht alle Probleme. Ein weiteres Problem gibt es noch. Schauen wir uns das einmal an. Ich möchte mal mein Textarea-Element, meine Auswahlliste, und meine Inputfelder innerhalb vom Textfeld, das sind diese Felder, auf eine einheitliche Breite im Beispiel von 200 Pixel setzen. Dann, wenn wir es genau ansehen, sehen wir, die sind nicht gleich breit. Das liegt daran, dass Browser teilweise unterschiedliche Boxmodelle anwenden. Das können wir vereinheitlichen. indem wir an dieser Stelle auswählen, box-sizing: border-box. Das mache ich noch einmal. box-sizing: border-box. Damit schalten wir auf das andere Box-Modell um, was sich in vielen Fällen wirklich empfiehlt. Gerade auch in unserem Beispiel. Zusätzlich ergänze ich die Angabe noch mit dem webkit-Präfix. Sehen wir uns das an. Jetzt sind unsere Felder gleich breit. Sie haben in diesem Film gesehen, dass es bestimmte Besonderheiten bei Formularfeldern gibt. Etwa, dass die Schriftfarbe nicht automatisch für die Inputfelder gilt. Für solche und allgemeine Probleme empfiehlt es sich, normalize.css einzubinden. Übrigens können Sie die Datei auch mal anschauen. Sie ist sehr schön dokumentiert. Man findet auch nützliche Hinweise, was da alles geschieht. Außerdem haben Sie gesehen, dass, wenn Sie Probleme bei Breitenangaben und Formularfeldern haben, es sich dann empfiehlt, box-sizing: border-box zusätzlich zu ergänzen.

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!