Dein Besucher überfliegt dein Formular in zwei Sekunden, bevor er ein einziges Zeichen tippt. Er liest Feldgrößen, Abstände und Layout. Ein Postleitzahlfeld, das so breit ist wie das ganze Formular, schreit nach Verwirrung. Eine einzeilige Textarea für ausführliches Feedback sendet die Botschaft, dass du nicht viel erwartest.
Die Breite deines Eingabefelds sagt dem Nutzer, wie viel Text du von ihm erwartest. Ein winziges Textfeld signalisiert "gib mir deinen Namen". Eine hohe Textarea signalisiert "erzähl mir deine Geschichte". Wenn du das falsch machst, handelst du dir Verwirrung, Tippaufwand und Formularabbrüche ein.
Dein Formular enthält zwei Arten von Texteingabefeldern: das einzeilige Eingabefeld und die mehrzeilige Textarea. Sie sehen unterschiedlich aus, verhalten sich unterschiedlich und lösen unterschiedliche Probleme. Die richtige Wahl ist nicht kompliziert, aber sie beeinflusst, wie Nutzer dein Formular wahrnehmen und ob sie es ausfüllen.
Was ist ein Texteingabefeld
Ein Texteingabefeld ist ein einzeiliges Feld, in das Nutzer kurzen Text tippen. Am Rand springt es nicht in eine neue Zeile. Es unterstützt keine mehreren Absätze. Drückst du Enter, wird das Formular abgesendet (oder springt zum nächsten Feld). Es ist für begrenzte, kurze Daten gedacht.
Ein Texteingabefeld schließt einen mentalen Vertrag mit dem Nutzer. Du fragst nach etwas Schnellem. Einem Namen. Einer E-Mail. Einer Postleitzahl. Einem Datum. Einer einzelnen Information.
Was ist eine Textarea
Eine Textarea ist ein mehrzeiliges Textfeld, das beim Tippen wächst. Drückst du Enter, entsteht eine neue Textzeile. Sie scrollt senkrecht, wenn der Inhalt den sichtbaren Bereich überschreitet. Sie signalisiert dem Nutzer, dass du mehr als ein paar Wörter erwartest. Absätze sind willkommen. Ausführliche Gedanken sind erwünscht.
Eine Textarea hebt die Einschränkung auf. Der Nutzer weiß, dass er so viel schreiben kann, wie er braucht, ohne seine Antwort in eine einzige Zeile zu pressen.
Wann du ein einzeiliges Texteingabefeld nutzt
Nutze ein Texteingabefeld, wenn die erwartete Antwort in eine Zeile passt und der Nutzer in wenigen Worten oder weniger antworten kann.
Kontaktdaten
Name, E-Mail, Telefonnummer. Diese Felder sind immer einzeilige Eingaben. Der Nutzer erwartet, einen Namen zu tippen und weiterzumachen, nicht einen Texteditor für seine Telefonnummer zu öffnen.
Kurze Kennungen
Benutzername, Kontonummer, Postleitzahl, Passwort. Diese haben festgelegte Längen oder sollen kurz sein. Eine einzeilige Eingabe ist sinnvoll.
Orts- und Logistikfelder
Stadt, Bundesland, Land, Straße (erste Zeile). Das sind in der Regel einzeilige Einträge. Du kannst die Adresse in mehrere einzeilige Felder aufteilen statt in eine große Textarea.
Suche und Filter
Suchfelder. Produktfilter. Datumsbereiche. Hier wird eine schnelle Eingabe erwartet, kein Absatz. Einzeilige Eingaben fühlen sich richtig an.
Daten und Zahlen
Jedes Feld, in das der Nutzer ein bestimmtes Datum, eine Uhrzeit, eine Menge oder einen Preis eingibt. Einzeilige Eingabe. Manchmal willst du einen speziellen Eingabetyp für Daten (wie eine Datumsauswahl), aber das Bedienmodell bleibt einzeilig.
Wann du eine Textarea nutzt
Nutze eine Textarea, wenn du erwartest, dass der Nutzer mehr als einen Satz schreibt oder die Antwort von Natur aus länger als eine Zeile ist.
Kommentare und Feedback
Wenn du fragst "Welches Feedback hast du?", denkt der Nutzer in Absätzen, nicht in einzelnen Wörtern. Eine Textarea signalisiert, dass Platz für seinen ganzen Gedanken da ist. Er fühlt sich nicht eingeengt.
Nachrichten- und Anfrageformulare
Wenn ein Besucher ein Kontaktformular mit Nachrichtenfeld ausfüllt, braucht er Raum, um seine Situation zu erklären. Die Textmenge schwankt stark. Eine Textarea fasst sowohl eine kurze Frage in zwei Sätzen als auch eine ausführliche Anfrage in zwei Absätzen.
Beschreibungs- und Detailfelder
Produktbeschreibungen, Projektbriefings, Leistungsanforderungen. Jedes Feld, das den Nutzer um Kontext oder Details bittet. Eine Textarea lädt zu diesen Details ein.
Notizen und besondere Hinweise
Ein Feld mit "Besondere Wünsche hinzufügen" oder "Hinweise zur Lieferung" braucht oft eine Textarea, weil du nicht vorhersagen kannst, ob der Nutzer zwei Wörter oder zwei Absätze ergänzen will.
Das Größenprinzip: Die Feldbreite deutet die erwartete Länge an
Deine Feldgröße sendet eine Botschaft, bevor der Nutzer ein einziges Zeichen tippt. Ein Postleitzahlfeld über die volle Formularbreite sorgt für Verwirrung. Der Nutzer sieht den ganzen Platz und denkt "habe ich falsch verstanden, wonach ihr fragt?"
Nutze diese Regel: Die optische Größe des Felds sollte zur erwarteten Länge der Antwort passen.
Kurze Texteingabefelder
Mach das Eingabefeld für eine Postleitzahl schmal. Vielleicht 80 bis 120 Pixel breit am Desktop. Dieses visuelle Signal sagt dem Nutzer "tippe fünf Ziffern, keinen Absatz".
Nutze für ein Namensfeld eine mittlere Breite. Vielleicht 200 bis 300 Pixel. Lang genug für "Alexander Thompson", aber nicht so breit, dass es zu einer Biografie einlädt.
Textareas
Textareas wachsen waagerecht und senkrecht. Eine Textarea mit vier Zeilen Höhe signalisiert eine größere Antwort als eine mit zwei Zeilen. Lass deine Textarea zum erwarteten Aufwand passen.
Erwartest du ein paar Sätze, starte mit drei bis fünf sichtbaren Zeilen. Fragst du nach ausführlichem Feedback, starte mit sechs bis acht Zeilen. Nutzer können das Feld vergrößern, wenn sie mehr Platz brauchen, aber die Anfangsgröße setzt ihre Erwartung.
Gestaltungsregeln für Texteingabefelder
Immer mit einem Label kombinieren
Nutze Platzhaltertext nie als Ersatz für ein sichtbares Label. Platzhaltertext verschwindet, sobald der Nutzer zu tippen beginnt, verletzt die Barrierefreiheit und lässt ihn raten, was das Feld wollte. Nutze ein klares Label über oder neben dem Feld und Platzhaltertext nur als sanften Hinweis.
Schlechtes Beispiel: Ein Feld ohne Label, nur grauer Platzhaltertext mit "Gib deinen Namen ein".
Gutes Beispiel: Ein Label "Name" über dem Eingabefeld, mit optionalem Platzhaltertext wie "Max Mustermann".
Pflichtfelder klar kennzeichnen
Kennzeichne Pflichtfelder mit einem Sternchen (*) oder dem Wort "(Pflichtfeld)" in Klammern. Lass Nutzer nicht raten, ob ein Feld optional ist.
Früh validieren, Fehler elegant auffangen
Gibt ein Nutzer eine ungültige E-Mail-Adresse oder eine falsch formatierte Telefonnummer ein, lösche seine Eingabe nicht. Zeige eine Fehlermeldung, die das Problem konkret erklärt, und behalte seine Teileingabe, damit er sie korrigieren kann, statt von vorn zu tippen.
Den erwarteten Eingabetyp unterstützen
Nutze für E-Mail type="email", damit mobile Nutzer eine E-Mail-optimierte Tastatur bekommen. Nutze für Telefon type="tel". Nutze für Zahlen type="number". Diese speziellen Eingabetypen verbessern das mobile Erlebnis, ohne dir Mehrarbeit zu machen.
Gestaltungsregeln für Textareas
Die Textarea mit dem Inhalt wachsen lassen
Tippt ein Nutzer eine lange Nachricht und die Textarea bleibt gleich groß, muss er beim Tippen im Feld scrollen. Das stört das Schreiben. Nutze CSS oder JavaScript, damit sich die Textarea automatisch vergrößert, wenn der Nutzer mehr Zeilen hinzufügt. Er tippt natürlich, das Feld wächst, kein Scrollen im Feld selbst.
Die Anfangsgröße deutlich zeigen
Eine Textarea sollte genug sichtbare Höhe haben, um zu signalisieren, dass du mehr als eine Zeile erwartest. Zeige mindestens drei bis fünf Zeilen leeren Platz, damit Nutzer verstehen, dass es kein Einzeiler ist.
Bei Bedarf ein sinnvolles Zeichenlimit setzen
Manche Textareas haben Limits. Ein Kundensupport-Formular könnte Feedback auf 5.000 Zeichen begrenzen. Wenn du ein Limit hast, zeige beim Tippen die verbleibende Zeichenanzahl. Lass den Nutzer sehen, wie viel Platz er noch hat, statt es erst zu entdecken, wenn er an die Grenze stößt.
Für Code oder technische Eingaben eine Festbreitenschrift nutzen
Ist die Textarea für Code-Schnipsel oder technische Daten, nutze eine Festbreitenschrift (Monospace), damit Abstände und Ausrichtung optisch zählen. Für normalen Text wie Nachrichten oder Feedback nutze die Standardschrift ohne Serifen, die zu deiner Marke passt.
Häufige Fehler bei Texteingabefeldern
Alle Textfelder gleich breit machen
Wenn jedes Eingabefeld in deinem Formular gleich breit ist, verlierst du das visuelle Signal zur erwarteten Länge. Ein Postleitzahlfeld sollte nicht so breit sein wie ein Namensfeld. Lass die Größe die Erwartung vermitteln.
Platzhaltertext statt Labels nutzen
Das wurde oben erwähnt, ist aber entscheidend. Platzhaltertext ist als Hinweis hilfreich, nicht als Label. Ein Nutzer mit Screenreader sieht Platzhaltertext nicht. Ein Nutzer, der einige Felder ausgefüllt hat und zurückkehrt, vergisst, was das Feld wollte.
Validierungsfehler nicht im Kontext zeigen
Tippt der Nutzer eine ungültige E-Mail und die Fehlermeldung erscheint oben im Formular, während das E-Mail-Feld unten steht, muss er scrollen, um das Problem zu finden. Halte Fehlermeldungen nah am Feld, das sie ausgelöst hat, farbig (rot oder orange) und mit einem Symbol, das "etwas stimmt nicht" signalisiert.
Kein Rückgängigmachen beim Leeren erlauben
Wenn der Nutzer ein Feld versehentlich leert oder das Formular einen "Leeren"-Button hat, der alles löscht, stelle sicher, dass er das rückgängig machen kann. Ein einziger Tipp auf einen Button sollte nicht fünf Minuten Ausfüllarbeit vernichten.
Häufige Fehler bei Textareas
Textareas mit fester Größe, die nicht wachsen
Eine Textarea, die gleich groß bleibt, während der Inhalt überläuft und Scrollen erfordert, zwingt den Nutzer, in einem winzigen Fenster zu tippen. Das Erlebnis fühlt sich kaputt an. Lass die Textarea mit dem Inhalt wachsen.
Keine klare Anzeige eines Zeichenlimits
Wenn deine Textarea eine maximale Länge hat, sollte der Nutzer das wissen, bevor er sie erreicht. Zeige einen Zeichenzähler, der sich beim Tippen aktualisiert. "Noch 500 Zeichen" oder "2 von 5.000 Zeichen" sagt ihm sofort, wie viel Platz er hat.
Zu klein anfangen
Eine Textarea mit nur einer Zeile Höhe vermittelt nicht "ich will dein ausführliches Feedback". Sie sieht aus, als wäre sie noch ein einzeiliges Feld. Starte mit mindestens drei bis vier sichtbaren Zeilen, damit der Nutzer versteht, dass er mehr schreiben kann.
Beispiele: Eingabefeld oder Textarea im Kontext
Ein Kontaktformular
Namensfeld: einzeiliges Eingabefeld. Breit genug für einen langen Namen, aber schmal genug, um "nur dein Name" zu signalisieren.
E-Mail-Feld: einzeiliges Eingabefeld mit type="email".
Telefonfeld: einzeiliges Eingabefeld mit type="tel".
Nachrichtenfeld: Textarea, hoch genug für ein paar Absätze.
Ein Formular für Produktbewertungen
Dein Name: einzeilige Eingabe.
Deine E-Mail: einzeilige Eingabe mit type="email".
Bewertung (1 bis 5 Sterne): ein spezieller Eingabetyp, aber keine Textarea.
Deine Rezension: Textarea.
Würde ich anderen empfehlen: eine Checkbox, keine Texteingabe.
Ein Checkout-Formular
Vorname, Nachname, E-Mail, Telefon: alles einzeilige Eingaben.
Lieferadresse (Straße, Stadt, Bundesland, Postleitzahl): in der Regel mehrere einzeilige Eingaben, keine Textarea für die ganze Adresse.
Besondere Lieferhinweise: Textarea. Der Nutzer hat je nach Bedarf einen Satz oder drei Sätze.
WEMASY Formulare: Eingabefelder und Textareas erstellen
Der Formular-Builder von WEMASY enthält sowohl Texteingabe- als auch Textarea-Felder. Wenn du deinem Formular ein Feld hinzufügst, wählst du den Feldtyp danach, wonach du fragst.
Für ein Kontaktformular in WEMASY fügst du ein Texteingabefeld für Name und E-Mail des Besuchers hinzu und dann eine Textarea für seine Nachricht. WEMASY übernimmt die Gestaltung automatisch, sodass deine Eingabefelder und Textareas zu den Farben und der Typografie deiner Marke passen. Du konzentrierst dich darauf, die richtigen Fragen zu stellen. Der Formular-Builder kümmert sich um Layout und Feldverhalten.
Brauchst du eine spezielle Eingabe (wie eine Datumsauswahl oder E-Mail-Validierung), unterstützt WEMASY auch das. Feldgröße, Verhalten und Validierung wirken zusammen und führen den Nutzer zum Abschluss.