Formulare mit HTML und CSS

Formularfelder auswählen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bevor Sie Formulare gestalten können, müssen Sie erst einmal die einzelnen Felder auswählen. Das geht über klassische Selektoren, praktisch sind aber in diesem Zusammenhang auch die Attributselektoren.

Transkript

Um Formulare gestalten zu können, muss man erst einmal die einzelnen Elemente auswählen. Dafür gibt es mehrere Möglichkeiten. Ich habe ein einfaches Formular. Wenn wir uns das im Browser ansehen, dann hat dieses Formular verschiedene Felder. Wie kann ich die auswählen? Es gibt natürlich immer Beschriftungen. Die kann ich auswählen, indem ich den Namen des Elements schreibe. In diesem Fall Label. Sinnvoll wäre etwa, cursor: pointer zu schreiben. Dann erkennt man, dass man draufklicken kann. Wenn ich hier hingehe, hat sich der Cursor geändert. Ich komme dann immer da drauf. Folgendes wäre bei dem Formular eigentlich ganz schön. wenn so etwas wie Name oder Vorname immer oberhalb des Feldes stehen würde. Dafür müsste ich ja nur die Beschriftung zu einem Blockelement machen. Sie sehen gleich, dass das nicht funktionieren wird. Na ja, so halb. Hier unten funktioniert es wunderbar. Das ist das, was ich haben möchte. Aber es passt natürlich nicht zu Radio Buttons und Checkboxen. Das heißt, ich muss die Label-Elemente auswählen, die für ein input type="email" oder type="text" gedacht werden, aber ich möchte nicht die Label-Elemente von Radio Buttons oder Checkboxen. Dem Label-Element sehe ich leider nicht an, ob es eine Beschriftung für den einen oder den anderen Typ ist. Ich könnte da direkt mit Klassen operieren. Aber praktischer ist es, wenn man die Formularfelder immer in ein umfassendes Element schreibt und dem eine Klasse gibt. Das habe ich bereits vorbereitet. Ich habe bei diesen Feldern wie Name, Vorname, E-Mail-Adresse und Web-Adresse ein diffclass-Textfeld geschrieben. Das sind die Elemente, wo ich auch möchte, dass die Beschriftungen zu Blockelementen werden. Das heißt, ich schreibe Textfeld. .textfeld, weil ich eine Klasse habe. Dann label, damit wähle ich jetzt nur diese Labels aus. Die bekommen ihr display: block. Jetzt hat's geklappt. Die Beschriftungen sind weiter da, wo sie vorher waren, aber die sind so angeordnet. Also bei Formularfeldern praktisch, mit umfassenden Elementen zu arbeiten. denen man eine Klasse gibt, die einem verrät, um welchen Typ von Formularfeld es sich handelt. Ebenfalls praktisch bei den Formularfeldern sind die Attributs-Selektoren. Sie können jetzt sagen, Sie möchten nur die Inputfelder, die das Attribut type haben, was auf text gesetzt ist. Denen geben wir zum Beispiel mal einen anderen Hintergrund. background: yellow Das sehen wir uns an. Hat geklappt. Das sind die beiden Textfelder. Die E-Mail-Adresse habe ich natürlich nicht dabei, weil sie nicht type=text hat, sondern type=email. Das kann ich natürlich zusätzlich angeben, indem ich das noch hinschreibe. email ... und auf dieselbe Art kann ich dann auch die URL dazunehmen. Das sehen wir uns nochmal an. Die alle haben einen gelben Hintergrund. Wir haben uns in diesem Film mit Selektoren zur Auswahl von Formularelementen beschäftigt. Zum einen können Sie die Elemente ganz normal über den Namen auswählen. In manchen Fällen ist es praktisch, mit einem umfassenden Element zu arbeiten, um die einzelnen Formularfeldtypen zu unterscheiden. Ebenfalls sehr nützlich sind in diesem Bereich die Attributs-Selektoren.

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!