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.
Weitere Informationen findest du in diesem Artikel: Das <main>-Element: Strukturierung und Inhalt im HTML-Dokument
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
undmin-height
: Legt die minimalen Abmessungen des Elements fest. -
max-width
undmax-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.
Mehr dazu erfährst du in: RadioButton-Elemente in HTML: Eine umfassende Anleitung
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.
Mehr Informationen findest du hier: HTML-Schriftarten: So kontrollieren Sie Textdarstellung und -stil
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:
Siehe auch: Das HTML-Element <article>: Struktur und Verwendung
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
undaria-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.
Für nähere Informationen besuche: So fügen Sie Häkchen in HTML-Dokumente ein: Ein Schritt-für-Schritt-Leitfaden
Beispiel:
textarea {
color: #000;
background-color: #fff;
contrast-ratio: 4.5;
}
Verwandte Artikel
- Die Allmacht der ID in HTML: Ultimative Anleitung zur Element-Identifizierung
- HTML-Warnmeldungen: Eine umfassende Anleitung zur Verwendung von browserbasierten Benachrichtigungen
- HTML -Tag: Eine umfassende Anleitung zur Markierung von Textinhalten
- HTML-Tabellenüberschriften: Erstellen klarer und informativer Tabellen
- Das
- BR HTML: Der unterschätzte Zeilenumbruch
- HTML-Entities: Ersetzen von Sonderzeichen im Web
- HTML Trennlinien: So teilst du Inhalte klar und effektiv
- HTML-Label: Das unsichtbare Element, das Eingabefelder definiert
- Umfassender Leitfaden zum HTML-Listen-Tag
- Der ultimative Leitfaden zur Verwendung von HTML-Schaltflächen für Formulareingaben
- Vertikale Leerzeichen in HTML: So fügst du Platz zwischen Zeilen und Elementen hinzu
Neue Posts
World of Warcraft auf Linux spielen: Eine guide für Abenteurer
Einführung in World of Warcraft
Node.js NVM: Antworten auf die häufigsten Fragen
Entwicklung
Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen
Marketingstrategien
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten
SEO-Optimierung
Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit
Online-Marketing
HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web
Einführung in HTTP-Statuscodes
Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg
SEO-Optimierung
Beschleunigen Sie die Dateneingabe mit HTML Datalist
Webentwicklung
HTML in PUG konvertieren: Einfach und schnell gemacht
Webentwicklung
Beliebte Posts
SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern
Sicherheitsrichtlinien
POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web
Webentwicklung
LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben
Dokumentenerstellung
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden
Fehlerbehebung
Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers
Fehlerbehebung
Linux Mint Themes: Personalisieren Sie Ihren Desktop
Open Source
TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose
Fehlerbehebung
Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung
Anleitungen
Linux Open File: Anleitung zum Öffnen, Bearbeiten und Löschen von Dateien aus dem Terminal
Open Source