Formulare ❘ Buttons ❘ Eingabefelder ❘ Textbereiche ❘ Auswahllisten

Textbereiche (mehrzeilige Eingabefelder) bieten dem Benutzer die Möglichkeit einen längeren Text einzugeben. Die Länge des erlaubten Textes ist theoretisch unbegrenzt, diese kann vom Seitenbetreiber mit maxlength, JavaScript oder serverseitig mit PHP limitiert werden.

Aufbau eines Textbereichs

<textarea></textarea>

Attribute

name - Bezeichnername

<textarea name=""></textarea>

rows - Anzahl der angezeigten Zeilen (rows = Zeilen)

<textarea rows="5"></textarea>

cols - Anzahl der angezeigten Spalten (cols = columns = Spalten)

<textarea cols="40"></textarea>

Besser als die Attribute rows/cols ist die Formatierung des Textbereichs mit CSS.
Somit wird der Textbereich in allen Browsern gleich groß dargestellt.

<textarea style="width: 180px; height: 150px;"></textarea>

wrap - Gibt an, wie das Steuerelement Text umbricht (hard / soft).

<textarea wrap="soft"></textarea>

Textvorbelegung in Textbereichen

Um Textbereiche mit Text vorzubelegen, notieren Sie den gewünschten Text einfach als Elementinhalt zwischen den Textarea-Tags. Leerzeichen und Zeilenumbrüche im Quelltext werden als solche dargestellt.

<textarea rows="3" cols="20"> Ich bin ein Text. </textarea>

<textarea rows="3" cols="20"> Ich bin ein 
mehrzeiliger Text. </textarea>

maxlength - Angabe der Zeichen die maximal eingegeben werden können - HTML 5 Attribut.

<textarea maxlength="10"></textarea>

id - Ein dateiweit eindeutiger Bezeichnername für ein Element.

<textarea id="abc"></textarea>

Mit diesem Attribut lässt sich über JavaScript auf die eingetragenen Angaben zugreifen. Außerdem kann über CSS der Textbereich formatiert werden und mit dem Label-Tag kann eine Verbindung vom Textbereich zum Label-Tag hergestellt werden.
Beispiel:

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

class - Ein Bezeichnername für ein Stylesheet-Klassen-Element.

<textarea class="xyz"></textarea>

Mit diesem Attribut kann über CSS der Textbereich formatiert werden.

readonly - Textbereiche auf "nur lesen" setzen.

<textarea readonly="readonly">Hallo Welt!</textarea>

disabled - Textbereich nicht kopierbar und nicht änderbar.

<textarea disabled="disabled" >Hallo Welt!</textarea>

onclick, onblur - JavaScript-Event-Handler ("Ereignis-Behandler")
Liste der Event-Handler (unvollständig): onclick, ondblclick, onkeydown, onkeyup, onmouseover,
onmouseout, onfocus, onblur, …
Mit diesen Attributen wird eine JavaScript-Funktion (Befehl) ausgeführt.
Beispielsweise wenn der Benutzer auf den Textbereich klickt (onclick):

<textarea onclick="alert(this.value);">Hallo Welt!</textarea>

placeholder - Platzhalter für den einzugebenden Text (Hinweise, etc.) - HTML 5 Attribut.
Das placeholder-Attribut definiert eine kurze Eingabeaufforderung oder einen Beispieltext, der in einem Textbereich angezeigt werden soll.

<textarea placeholder="Ich bin ein Platzhalter"></textarea>

required - Pflichtfeld - HTML 5 Attribut.

<textarea required="required"></textarea>

Wenn dieser Textbereich leer bleibt und der Benutzer drückt den Absenden-Button (Submit), so wird dies durch den Browser verhindert.

spellcheck - Rechtschreibprüfung (true/false) - HTML 5 Attribut.

<textarea spellcheck="true">rechtschreibprüfung</textarea>

Fehlerhafte Texteingaben werden mit einer roten "schlängelnden" Linie markiert (Browser abhängig).

autofocus - Der Textbereich erhält den Autofokus - HTML 5 Attribut.
Mit dem autofocus-Attribut können Sie Benutzer zu einem bestimmten Feld führen, indem Sie den Fokus nach dem Laden einer Webseite auf ein bestimmtes Feld oder Steuerelement lenken.

<textarea autofocus="autofocus"></textarea>

Das Autofocus-Attribut kann nur für ein Steuerelement in einem Dokument angegeben sein. Wenn mehrere Elemente dieses Attribut aufweisen, erhält beim öffnen der Seite nur das erste dieser Elemente auf der Seite den Fokus.

Textbereiche aufgebohrt

Um den Benutzer die Eingabe und Formatierung von Texten zu erleichtern, gibt es im Web zahlreiche (JavaScript-) Funktionen, die sich sehr leicht in ein Formular einbauen lassen. Durch die JavaScript-Anwendungen werden Textbereiche mit etlichen Funktionen ausgestattet.



» ckeditor.com (englisch)

» tinymce.com (englisch)

Textbereiche verändern

Moderne Browser bieten dem Benutzer die Möglichkeit den Textbereich in der Größe zu verändern.
In der rechten unteren Ecke des Textbereichs erscheint ein dreieckiges Symbol mit dem man die Größe des Elements sowohl horizontal wie vertikal verändern kann. Mit der CSS-Anweisung min-height (oder max-height, min-width, max-width) können Sie bestimmen, wie groß ein Textbereich mindestens (maximal) sein soll.

<textarea style="width: 200px; height: 100px;
 min-height: 50px; max-height: 150px;"></textarea>

Textbereich durch einem Mausklick automatisch markieren

<textarea onclick="this.select()"> Jede Menge Text ... </textarea>

Tipp

Formular Generator - In nur 3 Schritten zum fertigen Formular

Das erstellte PHP-Formular ist universell einsetzbar, die Daten können zum Beispiel als E-Mail gesendet, in einer Datei oder Datenbank gespeichert werden. Der Formular Generator erzeugt nach Ihren Einstellungen ein individuelles und valides Formular.