Formulare/textarea
- 20min
- einfach
- Kenntnisse in
Ein textarea-Element ist ein mehrzeiliges Eingabefeld (textarea = Textbereich). Es dient z. B. der Eingabe von mehrzeiligen Texten, etwa Kommentaren, Forumsbeiträgen oder Benachrichtigungen.
Inhaltsverzeichnis
<h2>Ganz spontan</h2>
<p>Welche HTML-Elemente fallen Ihnen ein, was bewirken sie?<p>
<textarea></textarea>
Das textarea-Element kann über die rechte untere Ecke in seiner Größe verändert werden.
Die Größe kann aber auch über Attribute oder über CSS festgelegt werden.
Folgende Attribute sind möglich:
-
name: Für die weitere serverseitige Verarbeitung benötigen auch die Textareas ein name-Attribut.
⇒ Was ist ein Webformular? - rows: bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe
- cols: bestimmt die Anzahl der angezeigten Spalten (cols = columns = Spalten)
„Spalten“ bedeutet dabei die Anzahl der Zeichen pro Zeile. - wrap: legt fest, ob Text umgebrochen werden soll. Mögliche Werte sind:
-
hard: -
soft: Bei einem harten Zeilenumbruch werden durch den Browser Zeilenumbrüche generiert, sodass keine Zeile mehr Zeichen hat, als durch dascols-Attribut vorgegeben. Solltest du alsowrap = "hard"verwenden, istcolsein Pflichtattribut.
-
rows und cols bestimmen lediglich die Anzeigegröße des Eingabebereichs, nicht die Länge des erlaubten Textes. Diese ist theoretisch unbegrenzt. Web-Browser statten die mehrzeiligen Eingabefelder bei der Anzeige üblicherweise mit Scrollbalken aus, sodass der Anwender bei längeren Eingaben scrollen kann.Textvorbelegung bei mehrzeiligen Eingabebereichen
Du kannst ein mehrzeiliges Eingabefeld mit Inhalt vorbelegen. Im Gegensatz zu den einzeiligen Eingabefeldern hat <textarea> kein value-Attribut. Um mehrzeilige Eingabefelder mit Text vorzubelegen, notiere den gewünschten Text einfach als Elementinhalt zwischen den Tags <textarea> und </textarea>. Leerzeichen und Zeilenumbrüche im Quelltext werden als solche dargestellt.
<h1>Schreibe eine Geschichte</h1>
<p>Hier der Anfang der Geschichte:</p>
<textarea cols="50" rows="10">Es war dunkel, feucht und neblig …</textarea>
Die textarea wird mit einem Text vorbelegt, der ergänzt, aber auch geändert werden kann.
Um den Besucher zur Texteingabe zu ermuntern, ist das Textfeld mit cols="50" 50 Zeichen breit und rows="10" 10 Zeilen hoch.
Gestaltung mit CSS
Mehrzeilige Eingabefelder können aber auch wie jedes andere Element mit CSS gestaltet werden:
textarea {
caret-color: red;
width: 60em;
height: 15em;
border: 1px solid #cccccc;
padding: 0.5em;
font-family: Tahoma, sans-serif;
}
textarea:focus {
background: #FFC;
}
Das Beispiel entspricht im Wesentlichen dem oberen Beispiel. Es erhält aber keine Attribute mehr, sondern wird über CSS gestaltet.
Die Textarea erhält nun eine Breite und Höhe über eine CSS-Festlegung im style-Element. Neben einem Rand und einem Innenabstand zur Verschönerung wird die Farbe des Textcursors, der beim Aktivieren des Eingabefelds aufleuchtet, mit caret-color rot gefärbt.
<textarea> keine weiteren HTML-Elemente erlaubt sind.Sämtliche Zeichen, die in HTML eine Sonderbedeutung haben, wie
<, > und &, müssen zwingend als Entity <, > und & geschrieben werden (siehe HTML/Tutorials/Code in HTML darstellen). Ebenso ist eine Formatierung einzelner Bereiche des Textes nicht möglich.Eingabefelder und Eingabebereiche auf "nur lesen" setzen
Man kann erzwingen, dass der Inhalt eines Eingabefeldes nicht geändert werden kann, wenn Felder mit einem Wert vorbelegt sind, den der Anwender aber nicht ändern können soll oder eine bereits geprüfte Eingabe nicht mehr geändert werden darf.
<h1>Kein Rabatt und keine Gnade</h1>
<form>
<label>Preis: <input name="preis" type="text" size="8" value="€ 699.-" readonly></label>
<p>Lizenzvereinbarung:</p>
<textarea name="lizenz" cols="50" rows="10" readonly>Mit dem Absenden dieses Formulars erklären Sie sich mit folgenden Vereinbarungen einverstanden:
Sie erhalten …</textarea>
</form>
Das readonly-Attribut schützt ein einzeiliges Eingabefeld oder einen mehrzeiligen Eingabebereich vor Veränderungen.
Siehe auch
- contenteditable-Universalattribut, mit dem ein eingeschränkt funktionierender WYSIWYG-Editor nachgebaut werden kann.
- Formulare/WYSIWYG-Editor mit einem textarea-Element als Basis
Referenz
