Textarea-Element in HTML: Erstellen und Anpassen von mehrzeiligen Texteingabefeldern

Was ist ein Textarea-Element in HTML?

Ein Textarea-Element in HTML ist ein mehrzeiliges Texteingabefeld, mit dem du umfangreicheren Textinhalt erfassen kannst. Im Gegensatz zum <input>-Element für einzeilige Texteingaben ermöglicht dir das Textarea-Element die Eingabe mehrerer Zeilen Text.

Zweck des Textarea-Elements

Das Textarea-Element ist besonders nützlich für:

• Erfassung langer Nachrichten oder Beschreibungen
• Mehrzeilige Kommentaren oder Feedback
• Formatierung von Text mit Zeilenumbrüchen

Aufbau des Textarea-Elements

Das Textarea-Element wird wie folgt aufgebaut:

<textarea></textarea>

Der Text, den du in das Textarea-Element eingibst, wird zwischen dem öffnenden und schließenden <textarea>-Tag platziert.

Vorteile der Verwendung von Textarea

Die Verwendung von Textarea-Elementen bietet mehrere Vorteile:

• Mehrzeilige Eingabe: Ermöglicht die Erfassung umfangreicher Texte in einem einzigen Feld.
• Formatierung: Ermöglicht die Zeilenumbrüche für eine bessere Lesbarkeit.
• Anpassbar: Kann mit CSS angepasst werden, um das Erscheinungsbild und die Funktionalität zu optimieren.
• Barrierefreiheit: Bietet Unterstützung für barrierefreie Technologien wie Bildschirmlesegeräte.

Erstellen eines Textarea-Elements

Ein Textarea-Element zu erstellen ist ein einfacher Prozess, der aus nur wenigen Schritten besteht.

Schritt 1: Beginn- und End-Tag hinzufügen

Dieses Element wird durch ein öffnendes <textarea>-Tag und ein schließendes </textarea>-Tag definiert.

Schritt 2: Name und ID zuweisen

Du solltest dem Textarea-Element einen eindeutigen Namen und eine ID zuweisen, um es später leicht identifizieren und darauf zugreifen zu können.

Schritt 3: Zeilen und Spalten festlegen

Du kannst die Anzahl der angezeigten Zeilen und Spalten mithilfe der Attribute rows und cols festlegen. Dies hilft dir, die Größe des Textarea-Elements an deine spezifischen Anforderungen anzupassen.

Schritt 4: Platzhaltertext hinzufügen

Optional kannst du dem Textarea-Element einen Platzhaltertext hinzufügen, der angezeigt wird, wenn es leer ist. Dies hilft Benutzern dabei, den beabsichtigten Zweck des Elements zu verstehen.

Beispiel:

<textarea name="my-textarea" id="my-textarea" rows="5" cols="30" placeholder="Schreibe hier deinen Text..."></textarea>

Dieses Beispiel erstellt ein Textarea-Element mit dem Namen "my-textarea", der ID "my-textarea", 5 Zeilen, 30 Spalten und dem Platzhaltertext "Schreibe hier deinen Text…".

Attribute des Textarea-Elements

Mittels Attributen kannst du die Funktionalitäten und das Erscheinungsbild des Textarea-Elements anpassen. Nachfolgend werden die wichtigsten Attribute aufgeführt:

Wesentliche Attribute

• name: Gibt den Namen des Textarea-Elements an, der in Formularen zur Identifizierung und Verarbeitung verwendet wird.
• rows: Legt die Anzahl der sichtbaren Textzeilen fest (Standard: 2).
• cols: Legt die Anzahl der sichtbaren Zeichen pro Zeile fest (Standard: 20).

Attribut zur Platzhalterfunktion

• placeholder: Legt einen Platzhaltertext fest, der angezeigt wird, wenn das Textarea leer ist.

Attribut zur Texteingabe

• readonly: Macht das Textarea schreibgeschützt, sodass Benutzer keinen Text eingeben oder bearbeiten können.
• disabled: Deaktiviert das Textarea, sodass Benutzer es weder bearbeiten noch ausfüllen können.
• required: Gibt an, dass das Textarea ausgefüllt werden muss, bevor das zugehörige Formular gesendet werden kann.

Attribut zur Dimensionsanpassung

• wrap: Legt fest, wie Text innerhalb des Textarea umbrochen wird. Mögliche Werte sind "hard" (bei Wortumbrüchen), "soft" (bei Zeilenumbrüchen) und "off" (kein Zeilenumbruch).

Tipps zur Verwendung von Attributen

• Verwende das placeholder-Attribut, um Benutzern Anweisungen oder Beispiele zu geben.
• Setze das rows– und cols-Attribut, um die Größe des Textarea an deine Inhalte anzupassen.
• Verwende readonly und disabled, um die Bearbeitung zu steuern oder leere Felder zu verhindern.
• Das required-Attribut ist hilfreich, um sicherzustellen, dass wichtige Informationen eingegeben werden.
• Passe das wrap-Attribut an, um den Textfluss innerhalb des Textarea zu optimieren.

Styling des Textarea-Elements

Das Textarea-Element kann mit CSS individuell gestaltet werden, um seinen Stil an das Design deiner Website anzupassen. Hier sind einige wichtige CSS-Eigenschaften, die du verwenden kannst:

Schriftart und Text

• font-family: Legt die Schriftart des Textes fest.
• font-size: Bestimmt die Textgröße.
• font-weight: Steuert die Schriftstärke (z. B. fett, normal).
• color: Ändert die Textfarbe.

Hintergrund und Umrandung

• background-color: Legt die Hintergrundfarbe des Textarea-Elements fest.
• border: Definiert den Stil, die Breite und die Farbe des Rahmens um das Element.
• border-radius: Weist den Rändern des Elements abgerundete Ecken zu.

Größe und Abmessungen

• width: Legt die Breite des Textarea-Elements fest.
• height: Bestimmt die Höhe des Textfelds.
• min-width und min-height: Legt die minimalen Abmessungen des Elements fest.
• max-width und max-height: Gibt die maximalen Abmessungen an, die das Element erreichen kann.

Ausrichtung

• text-align: Richtet den Text im Feld aus (z. B. linksbündig, zentriert, rechtsbündig).
• vertical-align: Richtet den Text vertikal innerhalb des Elements aus.

Weitere Stileffekte

• box-shadow: Fügt einen Schatten hinter dem Element hinzu.
• opacity: Steuert die Transparenz des Elements.
• transform: Wendet Transformationen wie Skalierung, Drehung oder Verschiebung an.

Verwende CSS-Klassen oder Inline-Stile, um das Textarea-Element zu gestalten. Du kannst beispielsweise einen benutzerdefinierten Stil mit der folgenden Klasse erstellen:

.custom-textarea {
  width: 500px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  background-color: #efefef;
}

Mit dieser Klasse kannst du ein Textarea-Element mit einer bestimmten Breite, Höhe, Rahmung, Schriftart, Textfarbe und Hintergrundfarbe erstellen.

Ereignisse im Zusammenhang mit Textarea

Das Textarea-Element unterstützt verschiedene Ereignisse, mit denen du das Verhalten und die Interaktion mit dem Eingabefeld anpassen kannst.

*focus und blur

• focus: Wird ausgelöst, wenn das Textarea-Element den Fokus erhält.
• blur: Wird ausgelöst, wenn das Textarea-Element den Fokus verliert.

Verwendung: Verwende diese Ereignisse, um die Benutzeroberfläche zu aktualisieren oder benutzerdefinierte Aktionen auszuführen, wenn das Textarea-Element aktiv oder inaktiv wird.

*change und *input

• change: Wird ausgelöst, wenn sich der Wert des Textarea-Elements ändert.
• input: Wird ausgelöst, wenn sich der Wert des Textarea-Elements ändert, unabhängig davon, ob der Wert bestätigt wurde oder nicht.

Verwendung: Verwende diese Ereignisse, um den geänderten Wert zu verarbeiten und entsprechende Aktionen auszuführen.

*keydown, *keypress und keyup

• keydown: Wird ausgelöst, wenn eine beliebige Taste auf der Tastatur gedrückt wird.
• keypress: Wird ausgelöst, wenn eine alphanumerische Taste auf der Tastatur gedrückt wird.
• keyup: Wird ausgelöst, wenn eine beliebige Taste auf der Tastatur losgelassen wird.

Verwendung: Verwende diese Ereignisse, um auf Tastatureingaben zu reagieren und benutzerdefinierte Aktionen auszuführen, z. B. das Filtern von Ergebnissen oder das Auslösen von Autovervollständigungen.

*cut, *copy und paste

• cut: Wird ausgelöst, wenn Text aus dem Textarea-Element ausgeschnitten wird.
• copy: Wird ausgelöst, wenn Text aus dem Textarea-Element kopiert wird.
• paste: Wird ausgelöst, wenn Text in das Textarea-Element eingefügt wird.

Verwendung: Verwende diese Ereignisse, um auf Aktionen zum Ausschneiden, Kopieren und Einfügen zu reagieren und benutzerdefinierte Aktionen auszuführen, z. B. das Speichern des ausgeschnittenen oder kopierten Textes oder das Beschränken des Einfügens von bestimmten Formaten.

*select und selectionchange

• select: Wird ausgelöst, wenn Text im Textarea-Element ausgewählt wird.
• selectionchange: Wird ausgelöst, wenn sich die Textauswahl im Textarea-Element ändert.

Verwendung: Verwende diese Ereignisse, um auf Textauswahländerungen zu reagieren und benutzerdefinierte Aktionen auszuführen, z. B. das Einfügen von Tags oder das Ausführen von Rechtschreibkorrekturen für den ausgewählten Text.

Beispiele für die Verwendung von Textarea

Mehrzeilige Texteingabefelder

Ein Textarea-Element eignet sich hervorragend, wenn du mehrzeilige Texteingaben von deinen Nutzern abfragen möchtest. Dies kann hilfreich sein in folgenden Fällen:

• Kommentarfelder: Du kannst ein Textarea-Element verwenden, damit deine Nutzer Kommentare zu deinen Blog-Posts, Artikeln oder anderen Inhalten hinterlassen können.
• Adressformulare: Ein Textarea-Element kann verwendet werden, um die Adresse eines Nutzers in mehreren Zeilen zu erfassen.
• Produktbeschreibungen: Du kannst Textarea-Elemente verwenden, damit deine Nutzer detaillierte Beschreibungen ihrer Produkte angeben können, wenn sie sie auf deiner Website verkaufen.

Code-Editoren

Texarea-Elemente können auch als einfache Code-Editoren verwendet werden. Du kannst Syntax-Hervorhebung und andere Funktionen hinzufügen, indem du JavaScript-Bibliotheken wie CodeMirror integrierst.

Rich-Text-Editoren

Wenn du ein Textarea-Element mit einer WYSIWYG-Editor-Bibliothek wie TinyMCE oder CKEditor kombinierst, kannst du deinen Nutzern einen vollwertigen Rich-Text-Editor bieten.

Barrierefreie Textarea

Denke daran, dass Textarea-Elemente für alle Nutzer barrierefrei sein sollten. Füge beschreibende Beschriftungen hinzu und verwende aria-Attribute, um die Verwendung des Elements für Benutzer von Hilfstechnologien zu erleichtern.

Tipps zur Verwendung von Textarea

Neben den grundlegenden Funktionen des Textarea-Elements gibt es ein paar nützliche Tipps, die dir helfen, das Element effektiv zu nutzen:

Klarheit und Aufmerksamkeit

• Verwende einen aussagekräftigen placeholder-Text, um Benutzer/innen zu informieren, welche Art von Informationen sie eingeben sollen.
• Nutze das required-Attribut, um sicherzustellen, dass das Feld ausgefüllt wird, bevor das Formular abgeschickt werden kann.
• Erwäge die Integration eines maxlength-Attributs, um die Anzahl der Zeichen oder Zeilen zu begrenzen, die eingegeben werden können.

Benutzeroberfläche und Barrierefreiheit

• Berücksichtige die Größe des Textarea-Feldes und passe sie an die typische Länge des zu erwartenden Inhalts an.
• Verwende eine kontrastreiche Farbpalette und eine leicht lesbare Schriftart, um die Sichtbarkeit und Lesbarkeit zu verbessern.
• Implementiere eine autofocus-Einstellung, um den Fokus automatisch auf das Feld zu lenken, wenn die Seite geladen wird.
• Stelle sicher, dass das Element für assistive Technologien wie Bildschirmlesegeräte zugänglich ist, indem du relevante semantiken wie aria-label und aria-describedby verwendest.

Validierung und Sicherheit

• Verwende das pattern-Attribut, um ein regelbasiertes Validierungssystem zu implementieren und so sicherzustellen, dass die eingegebenen Daten ein bestimmtes Format oder Muster einhalten.
• Berücksichtige die Verwendung eines Bibliotheken wie jQuery oder Vue.js zur clientseitigen Validierung und zur Verbesserung der Benutzeroberfläche.
• Implementiere serverseitige Validierung, um böswillige Eingaben zu verhindern und die Datenintegrität zu wahren.

Barrierefreiheit des Textarea-Elements

Als Entwickler ist es wichtig, sich der Barrierefreiheit von Webinhalten für Personen mit Behinderungen bewusst zu sein. Das Textarea-Element bietet mehrere Funktionen, um die Barrierefreiheit zu verbessern.

Ausreichende Beschriftung

Stets eine aussagekräftige Beschriftung verwenden, um den Zweck des Textfelds zu beschreiben. Mit dem Attribut label kannst du ein beschreibendes Element mit dem Textfeld verknüpfen. Screenreader lesen diese Beschriftung vor, um Benutzern mitzuteilen, welche Informationen eingegeben werden sollen.

Beispiel:

<label for="name">Name:</label>
<textarea id="name"></textarea>

Unterstützung für assistive Technologien

Assistive Technologien wie Screenreader verlassen sich auf semantische Elemente, um Informationen über Webinhalte zu vermitteln. Verwende das textarea-Element anstelle generischer Eingabetypen wie input. Screenreader können so das Textarea-Element als mehrzeiliges Eingabefeld erkennen und den Benutzern entsprechende Funktionen wie Text-zu-Sprache-Vorlesen bieten.

Variable Textgröße

Wenn du umfangreiche Textinhalte erfasst, kann die Bereitstellung einer Möglichkeit zur Anpassung der Textgröße die Barrierefreiheit verbessern. Dies kann mit CSS-Styles erreicht werden, die Benutzern erlauben, die Textgröße zu vergrößern oder zu verkleinern.

Beispiel:

textarea {
  font-size: 1.2rem;
}

Unterstützung für Tastaturnavigation

Menschen, die auf Tastaturnavigation angewiesen sind, benötigen die Möglichkeit, durch Formularelemente zu navigieren, einschließlich Textareas. Verwende das Tabindex-Attribut, um eine logische Tabreihenfolge festzulegen und sicherzustellen, dass das Textarea-Element über die Tastatur zugänglich ist.

Beispiel:

<textarea tabindex="2"></textarea>

Kontrastverhältnis

Für Personen mit Sehbehinderungen ist ein ausreichendes Kontrastverhältnis zwischen dem Text und dem Hintergrund unerlässlich. Verwende CSS-Styles, um eine ausreichende Farbunterscheidung zu gewährleisten und die Lesbarkeit im Textarea-Element zu verbessern.

Beispiel:

textarea {
  color: #000;
  background-color: #fff;
  contrast-ratio: 4.5;
}