Formulare mit HTML und CSS

Beschriftungen über label

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Häufig vergisst man, dass es ein eigenes Feld für die Beschriftung von Formularfeldern gibt: das label-Element. Es ist wichtig für die Zugänglichkeit, aber auch für die Usability und die Gestaltung mit CSS.

Transkript

Welches Element nimmt man am besten für die Beschriftung eines Formularfeldes? Wenn ich ein Input-Feld habe, da soll der Benutzer den Vornamen eintragen. Wie kennzeichne ich diesen Text Vornamen? Die klare Antwort lautet: Über ein Label-Element, was danach auch wieder geschlossen wird. Jetzt muss ich allerdings noch dafür sorgen, dass der Bezug von Beschriftung zu Formularfeld hergestellt wird. Das mache ich, indem ich beim Label ein for-Attribut einsetze und da zum Beispiel Vorname reinschreibe. Denselben Wert, den ich bei for angegeben habe, muss ich als ID bei dem Formularfeld schreiben. Damit ist ein klarer Bezug zwischen den beiden hergestellt. Wir schauen uns das gleich im Browser an. Ich möchte davor aber noch ein weiteres Feld definieren. Mit einer Beschriftung, dass es noch deutlicher wird. Wir machen ein weiteres Feld für den Nachnamen. Da soll man also seinen Namen reinschreiben. Und wieder mit einer Beschriftung. Meinen Namen ändere ich an dieser Stelle noch und an dieser Stelle. Damit habe ich zwei Formularfelder. Eines für den Vornamen, eines für den Nachnamen. Jeweils mit einem Label-Element versehen. Sehen wir uns das im Browser an. Dann sieht es so aus. Formatiert ist es derzeit nicht. Das Entscheidende, womit Sie überprüfen können, ob das mit dem Label-Element geklappt hat, ist Folgendes: Sie können auf die Beschriftung klicken und landen dann sofort im entsprechenden Formularfeld, weil eben der Bezug hergestellt wird über dieses for-Attribut und entsprechend über die ID. Dieses Label-Element ist aus verschiedenen Gründen ganz wichtig, zum einen für die Zugänglichkeit von Formularen, weil dann eben auch assistive Programme den Bezug herstellen können, was also in das Feld reingeschrieben werden muss. Außerdem hilft das Label-Element für die Formatierung. Das möchte ich an einem kleinen Beispiel zeigen. Wenn ich möchte, dass die Beschriftung oberhalb des Input-Felds angezeigt wird, dann kann ich die auswählen über Label und wähle display: block. Wenn wir uns das anschauen, sieht man, dass die Beschriftungen immer oberhalb des Formularfelds angezeigt werden. Sie haben gesehen, dass man für Beschriftungen das Label-Element anwendet. Wichtig ist immer, den Bezug zum zugehörigen Formularfeld herzustellen über das for-Attribut. Derselbe Wert, der bei for steht, muss beim Formularfeld bei der ID stehen. Beschriftungen haben verschiedene Vorteile. Sie sind wichtig für die Zugänglichkeit von Formularen. Aber sie sind auch sehr praktisch für die Formatierung.

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!