Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Formulare mit HTML und CSS

Nützliche Pseudoklassen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Für Formulare gibt es eine Reihe von nützlichen Pseudoklassen: von :focus über :required (obligatorische Felder kennzeichnen) bis hin zum Formatieren des Platzhaltertexts.

Transkript

Für die Formatierung von Formularen gibt es eine Reihe von nützlichen Pseudoklassen. Beginnen wir einmal mit focus. Darüber können Sie Formularfelder besonders kennzeichnen, die den Fokus erhalten. Ich mache mal den Hintergrund gelb. yellow ... Das heißt, in dem Moment, wo ich in ein Formularfeld klicke, wird der Hintergrund gelb. Es gibt jetzt aber noch weitere Sachen. Ebenfalls praktisch ist, dass Sie obligatorische Felder, das heißt, Felder, die mit required gekennzeichnet sind, ebenfalls gezielt ansprechen können. Wenn ich mal required mache, und dann sage ich, die sollen eine andere Hintergrundfarbe haben, nämlich background=red. ... erst einmal. Die Felder, die obligatorisch sind, haben einen roten Hintergrund. Ich kommentier das mal aus, damit das Ganze nicht zu bunt wird. Ebenfalls können Sie unterscheiden, ob die Eingaben gültig sind oder nicht und darauf per CSS auch reagieren. Bei einer gültigen Angabe verwenden Sie valid. Entsprechend für eine ungültige Angabe invalid. Und was machen wir da? Wir lassen verschiedene Rahmen anzeigen. Das soll zum Beispiel einen grünen Rahmen haben. . .. solid green. Und wenn's nicht gültig ist, dann soll es einen orange Rahmen haben. Sehen wir uns das einmal an. Dann haben wir teilweise orange, teilweise grüne Rahmen. Warum hat Vorname einen grünen Rahmen? Weil die Eingabe nicht obligatorisch ist. Der Name, wenn ich was schreibe, wird auch grün, denn er ist obligatorisch. Wenn aber nichts drinsteht, ist die Eingabe nicht gültig und das ist orange. Sie sehen außerdem, dass das ganze Formular auch so einen Rahmen hat. Wenn wir das auf die Inputfelder beschränken wollen, dann können wir das natürlich machen, indem wir noch davor input schreiben. Jetzt sind nur die einzelnen Felder so gekennzeichnet. Wenn ich hier was Falsches reinschreibe, ist der Rahmen orange. Wenn ich eine gültige Angabe mache, kriegt es einen grünen Rahmen. Das sind die Angaben valid und invalid. Außerdem können Sie noch die Platzhaltertexte formatieren. Das hab ich mal vorbereitet, weil Sie da unterschiedliche Angaben je nach Browser brauchen. An sich lassen sich Platzhaltertexte über ::placeholder formatieren. Aber Sie brauchen je nach Browser dann unterschiedliche Angaben. Was formatieren wir damit? Die Stelle, wo Sie einen Platzhalter über placeholder angegeben haben. Im Beispiel habe ich dafür eine blaue Textfarbe definiert. Sie sehen, die Textfarbe ist blau. Das waren verschiedene Pseudoklassen für Formularfelder. Focus, wenn man reinklickt, required für die obligatorischen, valid/invalid, je nachdem, ob die Eingabe gültig ist oder nicht, und verschiedene Varianten für die Platzhaltertexte.

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!