HTML/Formulare/textarea

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Ein textarea-Element ist ein mehrzeiliges Eingabefeld (textarea = Textbereich). Es dient z.B. der Eingabe von mehrzeiligen Texten, etwa Kommentaren, Forumsbeiträgen oder Benachrichtigungen.

Beispiel ansehen …
<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.
Sie können seine Größe aber auch über Attribute oder über CSS festlegen.

Attribute[Bearbeiten]

Folgen Attribute sind möglich:

  • name: Für die weitere serverseitige Verarbeitung benötigen auch die Textareas ein name-Attribut.
  • 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-Attribut 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 das cols-Attribut vorgegeben. Sollten Sie also wrap = "hard" verwenden, ist cols ein Pflichtattribut.
Beachten Sie: Die Attribute 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.

Weitere Attribute für textarea-Elemente werden auf eigenen Seiten vorgestellt. Außerdem erfahren Sie dort Grundsätzliches zur Übertragung von Formulardaten sowie zur Gestaltung und Validierung von Formularen.

Anwendungsbeispiele[Bearbeiten]

Textvorbelegung bei mehrzeiligen Eingabebereichen[Bearbeiten]

Sie können ein mehrzeiliges Eingabefeld mit Inhalt vorbelegen. Im Gegensatz zu den einzeiligen Eingabefeldern hat <textarea> kein value-Attribut. Um mehrzeilige Eingabefelder mit Text vorzubelegen, notieren Sie den gewünschten Text einfach als Elementinhalt zwischen den Tags <textarea> und </textarea>. Leerzeichen und Zeilenumbrüche im Quelltext werden als solche dargestellt.

Beispiel ansehen …
<h1>Schreiben Sie 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[Bearbeiten]

Sie können mehrzeilige Eingabefelder aber auch wie jedes andere Element mit CSS gestalten:

Beispiel ansehen …
<textarea>Es war dunkel, feucht und neblig …</textarea>
Das Beispiel entspricht im Wesentlichen dem oberen Beispiel. Es erhält aber keine Attribute mehr, sondern wird über CSS gestaltet.
textarea {
	caret-color: red;  
	width: 60em;
	height: 15em;
	border: 1px solid #cccccc;
	padding: 0.5em;
	font-family: Tahoma, sans-serif;
}
textarea:focus {
      background: #FFC;
}
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.
Beachten Sie, dass innerhalb von <textarea> keine weiteren HTML-Elemente erlaubt sind.
Sämtliche Zeichen, die in HTML eine Sonderbedeutung haben, wie <, > und &, müssen zwingend als Entity &lt;, &gt; und &amp; geschrieben werden (siehe HTML/Regeln/Zeichenvorrat und HTML-eigene Zeichen). Ebenso ist eine Formatierung einzelner Bereiche des Textes nicht möglich.


Eingabefelder und Eingabebereiche auf "nur lesen" setzen[Bearbeiten]

Sie können erzwingen, dass der Inhalt eines Eingabefeldes nicht geändert werden kann, wenn Sie Felder mit einem Wert vorbelegen möchten, den der Anwender aber nicht ändern können soll oder eine bereits geprüfte Eingabe nicht mehr geändert werden darf.

Beispiel ansehen …
<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>

Mit dem Attribut readonly können Sie ein einzeiliges Eingabefeld oder einen mehrzeiligen Eingabebereich auf vor Veränderungen schützen.

Beachten Sie: Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie dieses Boolesche Attribut in der Form readonly="readonly" notieren. Weitere Informationen dazu im Kapitel Unterschiede zwischen XHTML und HTML.

siehe auch[Bearbeiten]