Sie sind hier: Startseite -> HTML-Grundlagen -> Formulare -> Beschriftung

HTML-Grundlagen: Label-Tag für Formulare

Label: Struktur und Hilfe im Formular

Das Formular zählt zu den wichtigsten Funktionen einer Webseite und wurde auch in anderer Weise zum Kritierum. Denn viele Formulare werden mit komplizierten Tabellenstrukturen gebaut, um das Layout und die Anordnung der Formularfelder so hinzubekommen, wie man es gerne hätte.

Das bedeutet aber, dass Menschen mit Behinderung, beispielsweise blinde oder stark sehbehinderte Menschen kaum mit dem Formular agieren können, weil sie sich nicht zurecht finden. Daher sollten die Felder erstens beschriftet werden und zweites so formatiert werden, dass die Tabellen nicht mehr nötig sind. Beides kombiniert der label-Tag, der mit Hilfe von CSS sogar eine praktische Hilfe beim Layout darstellt.

ergibt:

Vorname:
Nachname:
Newsletter erwünscht?



Im Beispiel sind jeweils drei Felder auf zwei Weisen angeführt. Im ersten Fall habe ich keine Formatierung gewählt, damit man sieht, wie HTML die Felder anordnet. Das ist das übliche Chaos, weshalb früher gerne Tabellen verwendet wurden, um Struktur in die Formulare bringen zu können.

Im zweiten Fall habe ich den label-Tag genommen, der zwei Funktionen hat. Durch die Angabe von for= erhält das Label für Menschen mit Behinderung eine Beschriftung, die Screenreader, die den Inhalt der Seite vorlesen, verarbeiten können. Und zusätzlich habe ich jetzt auf ganz simple Weise, den label-Tag mit CSS-Befehlen ausgestattet.

Simpel deshalb, weil man normalerweise in einer CSS-Datei diese Befehle vorgibt, sodass sie auf allen Formularen einer Webseite auf gleiche Weise wirken. Hier sollte aber nur eine Demonstration erfolgen und man sieht, dass ohne großen Aufwand die gleichen drei Felder strukturiert, barrierefrei und ohne Tabelle angeordnet werden können.

Ebenfalls interessant:

Formular (FORM)

Informationen über den FORM-Tag, mit dem ein Formular in eine Webseite eingebaut werden kann.

Checkbox

Informationen über die Checkboxen, die in Formulare eingebaut werden können.

Radiobutton

Informationen über den Radiobutton, der in HTML-Formulare für die Beantwortung genützt werden kann.

Schaltfläche

Informationen über die Schaltfläche, wie sie in Formularen programmiert wird.

Auswahlfeld

Informationen über die Auswahlliste mit Select, die bei HTML-Formularen oft genützt wird.

Auswahlfeld mehrfach

Informationen über die Auswahlliste mit select multiple, wodurch in HTML-Formulare eine Mehrfachauswahl möglich wird.

Textfeld

Informationen über das Textfeld, das in HTML-Formularen mit dem input-Tag erstellt werden kann und seine Parameter.

Mehrzeiliges Feld

Informationen über das mehrzeilige Textfeld in HTML-Formularen durch den textarea-Tag.

Verstecktes Feld

Informationen über das versteckte Formularfeld, das mit dem input-Tag unter HTML möglich wird, um interne Informationen einzubauen.

Schreibschutz

Informationen über den Schreibschutz bei Formularfelder in HTML-Formulare, der durch den Parameter readonly möglich wird.

Datei hochladen

Informationen über die Möglichkeit, Dateien über ein Formular durch den Type File des input-Tags hochzuladen.

[aktuelle Seite]

Beschriftung

Informationen über den Label-Tag für die Beschriftung von HTML-Formularfelder und zur Formatierung mit CSS bzw. als Hilfe für barrierefreie Formulare.

Zurück zum Hauptthema

Übersicht Formulare

Startseite HTML-Grundlagen