Formularkram

Von vielen Seiten kennt Ihr vermutlich Formulare, mit denen Ihr Informationen an die Seite schicken könnt. Für solche Formulare gibt es (wie Ihr hoffentlich schon erwartet habt) ein Tag in HTML, nämlich den form-Tag. Innerhalb des form-Tags stehen die einzelnen Elemente des Formulars wie Eingabefelder, Checkboxen und Buttons. Bleiben wir aber erstmal noch beim form-Tag. Dieser hat zwei wichtige Attribute: action und method. Im action-Attribut gebt Ihr die URL an, an die die eingegebenen Daten geschickt werden sollen. Das wird in den meisten Fällen ein Skript sein (solche serverseitigen Skripte werden uns später noch in aller Ausführlichkeit beschäftigen). Wenn kein action-Attribut angegeben ist, werden die Daten an die Seite mit dem Formular selbst geschickt

<form action="show_forum.php">
 ...
</form>

Das method-Attribut entscheidet darüber, mit welcher Methode die Daten an das angegebene Ziel geschickt werden. Dabei gibt es zwei Möglichkeiten: Bei get werden die Daten an die URL der aufgerufenen Seite angehängt

show_forum.php?forum=11&thread=1234&show_signature=true

bei post werden die Daten in die HTTP-Anfrage, die der Browser an den Server richtet, eingearbeitet, und erscheinen daher nicht der Adresszeile. get eignet sich besonders für kurze und nicht sensible Daten (da sie in der URL sichtbar sind). Umfangreichere und sensible Daten (insbesondere Passwörter) solltet Ihr per post übertragen.

Die Eingabeelemente innerhalb des form-Tags sind Inline-Elemente; die Anordnung wird meist mit Hilfe von blinden Tabellen realisiert. Wichtig bei allen Eingabelementen ist das name-Attribut. Unter diesem Namen landen die eingegebenen Werte beim auswertenden Skript; und auch von JavaScript aus könnt Ihr die Eingabefelder unter diesen Namen ansprechen.

Fast alle Formularelemente werden mit Hilfe von input-Tags erzeugt. Welches Element es jeweils werden soll, legt Ihr über das type-Attribut fest. Mit type="text" wird beispielsweise ein einzeiliges Text-Eingabefeld erzeugt

<input type="text">

Mit dem Attribut value könnt Ihr angeben, welchen Inhalt das Eingabefeld zu Beginn haben soll. Das Attribut size legt die Breite des Eingabefelds fest. Die maximale Zahl der Zeichen, die der User eingeben kann, steht im Attribut maxlength.

Sehr ähnlich ist type="password". Hier werden die eingegebenen Zeichen als * dargestellt, aber ansonsten nicht verschlüsselt. Die Attribute sind die gleichen wie beim «normalen» Textfeld

<input type="password">

Mit input-Tags könnt Ihr auch sogenannte Checkboxen erzeugen. Dazu benutzt Ihr type="checkbox"

<input type="checkbox">

Soll die Checkbox zu Beginn ausgewählt sein, gebt Ihr dem input-Tag das boolsche Attribut checked mit. Ist die Checkbox beim Abschicken des Formulars ausgewählt, erhält das auswertende Skript den Wert, der dem value-Attribut der Checkbox zugewiesen ist. Ansonsten wird für dieses Formularelement gar nichts an das Skript übertragen.

Ähnlich wie Checkboxen sind die sogenannten Radiobuttons. Für sie schreibt Ihr type="radio"

<input type="radio" name="buttons">
<input type="radio" name="buttons">

<input type="radio" name="other">

Wenn Ihr mit diesen drei Radiobuttons etwas spielt, werden Ihr merken, daß die oberen zwei zusammenhängen: Es kann jeweils nur einer ausgewählt sein. Das erreicht Ihr, indem Ihr den Radiobuttons den gleichen Wert im name-Attribut zuweist. Der dritte Radiobutton hat name="other" statt name="buttons" und ist daher von den beiden oberen unabhängig. Der Wert, der in der Variablen 'buttons' an das auswertende Skript weitergegeben wird, richtet sich nach dem Wert des value-Attributs des ausgewählten Radiobuttons. Wie bei den Checkboxen könnt Ihr mit dem Attribut checked festlegen, daß der Radiobutton bereits zu Beginn ausgewählt sein soll.

Natürlich könnt Ihr auch Buttons erzeugen. Das geschieht folgerichtig mit type="button"

 <input type="button" value="Knopf">

Die Aufschrift des Buttons wird per value-Attribut festgelegt. Mit HTML alleine könnt Ihr solche Buttons nicht mit irgendeiner Funktionalität verbinden; beim Anklicken geschieht also zunächst mal gar nichts. Das könnt Ihr mit Hilfe von JavaScript (dazu später mehr in einem eigenen Abschnitt) ändern.

Manchmal wollt Ihr dem User die Möglichkeit geben, Dateien von seinem Rechner auf den Server zu ü,bertragen ('hochladen', 'upload'). Auch dazu gibt es eine Variante des input-Tags, nämlich mit input="file"

 <input type="file">

Wie Ihr seht, stellt der Browser dazu ein Textfeld dar, in das der User den Pfad der hochzuladenden Datei schreiben kann. Zusätzlich wird mit einem Button die Möglichkeit angeboten, die Datei in einem kleinen Dateimanager-Fenster auszuwählen. Mit dem value-Attribut könnt Ihr wie gewohnt den Inhalt des Textfeldes vorgeben. Solche file uploads solltet Ihr mit Bedacht einsetzen: Wer weiß, was die Leute Euch so alles auf den Server kopieren?

Eine auf den ersten Blick etwas widersinnge Variante sind die sogenannten hidden fields. Das sind Formularelemente, die vom Browser überhaupt nicht dargestellt werden. Ihr erzeugt sie mit type="hidden". Was kann man mit einem Formularelement anfangen, in das der User keinen Wert hineinschreiben kann? Stellt Euch folgende Situation vor: Ihr habt zwei sehr ähnliche Formulare. Um nicht alles doppelt und dreifach auf dem Server zu haben, schicken beide Formulare ihre Daten an dasselbe Skript. Wie kann dieses Skript jetzt unterscheiden, wer ihm da etwas geschickt hat? Ganz einfach, indem Ihr dem einen Formular ein

<input type="hidden" name="formular" value="1">

mitgebt, und dem anderen ein

<input type="hidden" name="formular" value="2">

An diesem Beispiel seht Ihr auch, wie Ihr einen Wert in ein hidden field hineinbekommt: Wie gewohnt mit dem value-Attribut.

Es kommt vor, daß ein User beim Ausfüllen eines Formulars so durcheinanderkommt, daß er am liebsten wieder von vorne anfangen würde. Auch das geht, und zwar mit type="reset". Das erzeugt einen Button, der den «Ursprungszustand» des Formulars wiederherstellt. Die Aufschrift des Buttons könnt Ihr mit dem value-Attribut festlegen

<input type="reset" value="Zurück">

Zum Schluß gibt es noch type="submit". Das ist der Button, mit dem Eure User ihre Daten auf die Reise zum auswertenden Skript schicken. Die Aufschrift des Submit-Buttons steht (natürlich) im value-Attribt.

Neben dem input-Tag in all seinen Formen und Farben gibt es drei weitere Tags, die Formularelemente erzeugen. Einer davon ist textarea. Damit definiert Ihr ein mehrzeiliges Eingabefeld

<textarea cols="20" rows="3"></textarea>

Das inzwischen altbekannte value-Attribut wie beim input-Tag gibt es bei Textareas nicht. Der Text, der zu Beginn in der Textarea stehen soll, ist einfach der Inhalt des Elements (steht also zwischen öffnenden und schließendem textarea-Tag). Die Attribute cols bzw. rows legen die Größe der Textarea (Spalten bzw. Zeilen) fest. Diese Werte haben allerdings keine Auswirkungen auf die Textmenge, die in die Textarea eingeben werden kann. Wenn nötig, blendet der Browser Scrollbalken ein. Mit Hilfe des wrap-Attributs legt Ihr fest, ob in der Textarea am Ende der Zeile automatisch umgebrochen werden soll. Dazu gibt es drei Möglichkeiten: 'none' schaltet den automatischen Zeilenumbruch aus. 'virtual' bricht zwar in der Textarea um, schickt den eingegebenen Text aber ohne Zeilenumbrüche an das auswertende Skript. 'physical' schickt die Zeilenumbrüche mit. 'soft' entspricht 'virtual', 'hard' entspricht 'physical'.

Zwei häufige Fragen will ich an dieser Stelle direkt beantworten: Nein, es ist nicht möglich, eine Grenze für die Texteingabe in eine Textarea festzulegen. Und es auch nicht möglich, beispielsweise von JavaScript aus gezielt Teile des Textes in einer Textarea zu markieren (um z. B. Suchergebnisse zu markieren). Mit diesen beiden Vorhaben stößt Ihr an die Grenzen von HTML bzw. JavaScript.

Fehlt noch ein Formularelement, für das Ihr gleich zwei Tags braucht: Die Auswahllisten. Die Liste insgesamt wird mit dem select-Tag definiert, die einzelnen Einträge darin mit dem option-Tag

  Erster Eintrag
  Zweiter Eintrag

<select>
  <option>Erster Eintrag</option>

  <option>Zweiter Eintrag</option>
</select>

Der select-Tag kennt zwei wichtige Attribute: Das boolsche Attribut multiple legt fest, daß der User mehrere Einträge gleichzeitig auswählen kann. Das size-Attribut ermöglicht es, die Zahl der gleichzeitig sichtbaren Einträge anzugeben

  Erster Eintrag
  Zweiter Eintrag
 size="1"


  Erster Eintrag
  Zweiter Eintrag
 size="3"

Der option-Tag kennt ebenfalls einige Attribute, darunter das value-Attribut. Dessen Inhalt wird an das auswertende Skript übergeben, sollte das jeweilige option-Element ausgewählt sein. Welcher Eintrag zu Beginn ausgewählt ist, legt ein selected als boolsches Attribut fest.

Einige Attribute und Möglichkeiten habe ich hier der Übersichtlichkeit halber nicht erwähnt. Dazu zählen Dinge wie das Abschalten von option-Tags (damit das Skript nicht "Bitte wählen Sie einen Wert" als Eingabe bekommt) und andere teils nützliche Dinge. Wenn Ihr also einen Effekt erreichen wollt, den ich hier nicht erläutert habe, werft mal einen Blick in Eure bevorzugte HTML-Referenz.