HTML/Formulare/textarea

Aus SELFHTML-Wiki
< HTML | Formulare(Weitergeleitet von Rows)
Wechseln zu: Navigation, Suche

textarea-Elemente dienen der Eingabe von mehrzeiligen Texten, etwa Kommentaren, Forumsbeiträgen oder Benachrichtigungen.

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mehrzeilige Eingabebereiche definieren</title>
  </head>
  <body>
    <h1>Ganz spontan</h1>
    <p>Welche HTML-Elemente fallen Ihnen ein, was bewirken sie?<p>
    <textarea></textarea>
  </body>
</html>

<textarea … > leitet ein mehrzeiliges Eingabefeld ein (textarea = Textbereich). Für die weitere serverseitige Verarbeitung benötigen auch die Textareas ein name-Attribut. Siehe auch: Übertragung von Formulardaten

Der Angabe von Höhe und Breite des Eingabebereichs dienen die Attribute rows und cols. Das Attribut rows bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe, während cols die Anzahl der angezeigten Spalten (cols = columns = Spalten) festlegt. „Spalten“ bedeutet dabei die Anzahl der Zeichen pro Zeile.

Das wrap-Attribut legt fest, ob Text umgebrochen werden soll. Mögliche Werte sind hard oder 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.

Mit </textarea> schließen Sie das mehrzeilige Eingabefeld ab. Das End-Tag ist unbedingt notwendig und darf nicht weggelassen werden - auch in XHTML sollte es immer separat geschrieben werden.

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.

[Bearbeiten] Attribute

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

Hinweise zur Gestaltung von Formularen


[Bearbeiten] Textvorbelegung bei mehrzeiligen Eingabebereichen

Sie können ein mehrzeiliges Eingabefeld mit Inhalt vorbelegen.

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mehrzeilige Eingabebereiche mit Text vorbelegen</title>
  </head>
  <body>
    <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>
  </body>
</html>

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.

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.


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

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 …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eingabefelder und Eingabebereiche auf "nur lesen" setzen</title>
  </head>
  <body>
    <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>
  </body>
</html>

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.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML