Textbereich HTML-Vorlagen

HTML-Vorlagen für Textfelder in strukturierten Feldern

Die meisten Probleme mit mehrzeiligen Feldern entstehen bereits im Markup: Es fehlt eine Beschriftung, ein Name für die Eingabe und eine Information für den Besucher, ob zwei Sätze oder zwei Absätze erwartet werden. Eine Textfeld-Vorlage regelt diese Punkte zuerst.

Grundlegendes Markup: Beschriftung, Name, Zeilen

Ein vollständiges Support-Feld benötigt nur wenig. Eine Beschriftung wie „Problem beschreiben“ verweist über ihren „for“-Wert auf das Steuerelement. Das Steuerelement wiederholt diesen Wert als „id“, trägt einen „Namen“ wie „Nachricht“, öffnet sich in sechs Zeilen und bietet Platzhalter wie „Bestellnummer, Problembeschreibung, Lösungsversuche“.

Vier Details sind hierbei entscheidend:

1. „for“ in der Beschriftung und die zugehörige „id“ im Steuerelement verbinden die beiden. Ein Klick auf den Text platziert den Cursor im Feld, und Hilfsprogramme lesen beides als Einheit.

2. Der „Name“ ist der Schlüssel, unter dem die Antwort gespeichert wird. Ein Feld ohne diesen Namen ist nutzlos.

3. „rows“ legt fest, wie viele Zeilen vor dem Scrollen sichtbar sind – ein hilfreicher Hinweis auf die zu erwartende Länge.

4. „placeholder“ zeigt ein Beispiel an und ersetzt die Beschriftung nicht, da es beim ersten Tastendruck verschwindet.

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

Attribute für erforderliche oder begrenzte Antworten

Ein kurzer Kommentar und eine Garantieanfrage erfordern unterschiedliche Anforderungen. Drei Attribute decken diesen Unterschied weitgehend ab:

1. „required“ verhindert leere Eingaben und gehört in das Feld, ohne das Ihr Team nicht arbeiten kann, üblicherweise die Problembeschreibung.

2. „minlength“ legt eine Mindestlänge fest, ab der Ein-Wort-Antworten nutzlos sind, wie in einer Projektbeschreibung.

3. „maxlength“ begrenzt sehr lange Einträge und eignet sich am besten in Kombination mit einem Zähler, der über „aria-describedby“ mit dem Steuerelement verknüpft ist.

Das Ergebnis sind deutlich unterschiedliche Vorlagen. Eine Support-Nachricht behält das Attribut „required“, sechs Zeilen und eine Zeichenbegrenzung von knapp 1200 Zeichen bei. Eine Projektbeschreibung umfasst 10 Zeilen mit einer maximalen Länge von ca. 80 Zeichen. Eine Bewertung ist optional und unbegrenzt, da die Begrenzung hier das Schreiben erschwert.

Zugängliche Reihenfolge vor dem Absenden

Die Reihenfolge im Dokument ist genauso wichtig wie die Attribute. Zuerst die Beschriftung, dann der Hilfetext, dann das Steuerelement und schließlich die Stelle für eine Validierungsmeldung. Beim Vorlesen ist die Reihenfolge logisch, und ein Besucher, der mit der Tabulatortaste durch den Text navigiert, stößt auf die Erklärung vor dem leeren Feld. „aria-describedby“ verknüpft den Hilfetext und den Zeichenzähler mit dem Steuerelement, und kein Platzhalter kann diese Verknüpfung ersetzen.

Nicepage verwendet dieselbe Struktur über sein Kontaktformular-Element, wodurch Beschriftungen, Steuerelemente und das Absenden in der richtigen Reihenfolge bleiben.

Wählen Sie eine Vorlage anhand der benötigten Beschriftung, ob die Antwort obligatorisch ist, der erwarteten Länge, der Hinweise für den Besucher und der zugrunde liegenden Validierung.