Sie sind hier: Startseite -> HTML-Grundlagen -> Label (Formulare -> Beschriftung)

Label-Tag für Formulare nutzen

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.

Label auch für die Gestaltung nutzen

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.

Der Unterschied ist gewaltig, denn das zweite Formular ist auch abseits von einer Sehbehinderung ungleich übersichtlicher und damit hat das Formular einen ganz anderen Eindruck, was auch für das Marketing wichtig sein kann. Man muss sich jetzt vorstellen, dass man es mit einem Formular zu tun hat, das 20 Felder beinhaltet - dann erkennt man den Mehrwert noch stärker. Denn wenn die Leute suchen und grübbeln müssen, werden sie kein Interesse entwickeln und man verliert echte Kunden.

Label und CSS sind starke Partner

Hat man es mit mehreren Formularen zu tun, ist die Steuerung über die CSS-Datei noch wichtiger, weil man so erreicht, dass alle Formulare gleich aussehen und mit einer Einstellung kann man sie bei Bedarf auch anpassen und verändern. Möglichkeiten sind zum Beispiel die Schriftgröße, die Schriftart und vor allem der Platz, den man für den label-Tag, also die Beschriftung der Formularfelder vorsehen möchte.

Werbung
Angebote Webhosting

Lesen Sie auch

Die Formulare sind überraschend wichtige Elemente auf der Webseite, denn jede größere Plattform hat auch eine Suchmaschine und damit auch ein Eingabefeld - ergo ein Formular für diesen Zweck. Es gibt aber unterschiedliche Methoden, was und wie man für das Formular braucht. Typisch sind das Textfeld, das versteckte Textfeld für Bearbeitungen wie der aktuellen Artikelnummer und ein großes mehrzeiliges Feld für Fragen und Kommentare. Außerdem braucht es das form-Tag als generelles Element für Formulare und die Schaltfläche zum Abschicken.

Weitere Möglichkeiten bestehen mit Auswahlfeldern. Das kann die Checkbox sein, um eine Antwortoption zu aktivieren, die Radiobuttons für ja/nein-Situationen oder auch die Auswahlliste, wenn mehrere Antworten vorgeschlagen werden.

Bei den Formularen gibt es noch weitere Möglichkeiten, die sehr wichtig sein können. Eine Variante ist die Beschreibung durch den label-Tag, wodurch auch die Formatierung besser gelingt und eine weitere kann sein, dass man schreibgeschützte Felder einsetzt.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

label zur FormularbeschriftungArtikel-Thema: Label-Tag für Formulare nutzen
Beschreibung: Mit dem 🌍 label-Tag kann man in HTML ✅ Formularfelder beschreiben und sie auch gleich richtig formatieren und das Formular gestalten.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel