Textbereich HTML-Vorlagen

Textarea-HTML-Vorlagen für strukturierte Felder

Die meisten Probleme bei einem mehrzeiligen Feld beginnen im Markup: kein Label mit dem Eingabefeld verknüpft, kein Name für die Übertragung, kein Hinweis für Besucher, ob zwei Sätze oder zwei Absätze erwartet werden. Eine „textarea“-Vorlage klärt diese Punkte zuerst.

Grundlegendes Markup: Label, Name, Rows

Ein vollständiges Support-Feld benötigt wenig. Ein Label wie „Problem beschreiben“ verweist über seinen „for“-Wert auf das Steuerelement; das Steuerelement wiederholt diesen Wert als seine „id“, trägt einen „name“ wie „message“, öffnet sich mit sechs Zeilen („rows“) und bietet einen Platzhalter („placeholder“) wie „Bestellnummer, was passiert ist, was Sie versucht haben“.

Vier Details sind dabei entscheidend:

1. „for“ beim Label und die passende „id“ beim Steuerelement verbinden beide, sodass ein Klick auf den Text den Cursor in das Feld setzt und Hilfstechnologien sie als Einheit vorlesen;
2. „name“ ist der Schlüssel, unter dem die Eingabe übermittelt wird, und ein Feld ohne diesen liefert keine Daten;
3. „rows“ legt fest, wie viele Zeilen sichtbar sind, bevor das Scrollen beginnt – ein verlässlicher Hinweis auf die erwartete Textlänge;
4. „placeholder“ zeigt ein Beispiel und ersetzt niemals das Label, da er beim ersten Tastendruck verschwindet.

„cols“ ist das horizontale Gegenstück und wird in den meisten Vorlagen weggelassen.

Attribute für Pflichtfelder oder begrenzte Eingaben

Ein kurzer Kommentar und ein Garantieanspruch stellen unterschiedliche Anforderungen, und drei Attribute decken den Großteil davon ab:

1. „required“ verhindert das Absenden eines leeren Felds und gehört an das Feld, auf das Ihr Team keinesfalls verzichten kann – meist die Problembeschreibung;
2. „minlength“ setzt eine Untergrenze, wenn Ein-Wort-Antworten unbrauchbar sind, etwa bei einem Projekt-Briefing;
3. „maxlength“ begrenzt sehr lange Einträge und funktioniert am besten zusammen mit einem Zähler, den „aria-describedby“ mit dem Steuerelement verbindet.

Das Ergebnis sind erkennbar unterschiedliche Vorlagen. Eine Support-Nachricht behält das required-Attribut, sechs Zeilen und ein Limit von knapp 1200 Zeichen. Eine Projektbeschreibung umfasst 10 Zeilen mit einer Mindestlänge von etwa 80 Zeichen. Eine Bewertung bleibt optional und unbegrenzt, da ein Minimum hier vom Schreiben abhalten würde.

Barrierefreie Reihenfolge vor dem Absenden

Die Abfolge im Dokument ist genauso wichtig wie die Attribute. Zuerst das Label, dann möglicher Hilfetext, danach das Steuerelement und schließlich der Bereich für Validierungsmeldungen. Laut vorgelesen ergibt diese Reihenfolge Sinn, und Besucher, die mit der Tabulatortaste navigieren, erhalten die Erklärung vor dem leeren Feld. „aria-describedby“ verknüpft den Hilfetext und den Zeichenzähler mit dem Steuerelement – kein Platzhalter kann diese Verknüpfung ersetzen.

Nicepage baut dieselbe Struktur über das Contact Form Element auf, das Labels, Steuerelemente und den Sendevorgang geordnet hält.

Wählen Sie eine Vorlage nach dem benötigten Label aus, ob die Eingabe erforderlich ist, welche Länge Sie erwarten, welche Hinweise Sie Besuchern geben und welche Validierung dahintersteht.