Allgemeines zu Formularen

Mit dem HTML-Element "Formular" wird die Möglichkeit für Benutzereingaben bereitgestellt. Der Benutzer kann Textfelder ausfüllen, Optionen auswählen, mehrzeiligen Text eingeben etc. und seine Eingaben durch Klicken auf einen Button abschicken. Oft wird dadurch eine Datei auf dem Server aufgerufen, die sich um die Verarbeitung der gesendeten Daten kümmert. Es kann aber auch eine Email an eine voreingestellte Adresse gesendet werden, die alle Benutzereingaben enthält.

Formulare können für die unterschiedlichsten Zwecke eingerichtet werden: Von einem einzigen Eingabefeld (etwa die Google-Suche) über Benutzer-Anmeldungen bis hin zu langen Bestellformularen oder Online-Fragebögen. Formulare setzen sich aus verschiedenen - oben bereits erwähnten - Formularementen zusammen. Auch das Erscheinungsbild eines Formulars bzw. der einzelnen Elemente kann verändert werden, am besten durch CSS-Stylesheet-Angaben. Die Postionierung von Formularelementen und beschreibendem Text wird meist mithilfe einer Tabelle realisiert.

Formularbereich und Verarbeitung

Ein Formularbereich steht zwischen den Tags <form> und </form>. Ein HTML-Dokument kann auch mehrere Formulare beinhalten, diese dürfen jedoch nicht verschachtelt werden. Ein wichtiges Attribut, das im <form>-Tag vergeben wird, ist name, das die Bezeichnung des Formulars enthält.

Ebenfalls im <form>-Tag wird die Verarbeitung des Formulars beim Anklicken des Submit-Buttons festgelegt - und zwar durch das Attribut method. Diese kann entweder als GET (standardmäßig vorbelegt) oder POST angegeben werden. (Siehe dazu das Modul Variablen in Webseiten!) Die Datei die beim Abschicken des Formulars aufgerufen werden soll, wird mit dem Attribut action bestimmt.

Dazu ein Beispiel: Das folgende Formular trägt den Namen "login_form". Nach dem Drücken des Submit-Button wird die Datei "login.php" im Verzeichnis /script/ und der GET-Methode (Parameter werden mit der URL übergeben) aufgerufen.

<form action="/http://www.dma.ufg.ac.at/assets/11122/intern/verarbeiten.htm" method="get" name="mein_formular">
< !-- hier stehen die Formularelemente -->
< /form>

Und so würde das Formular per Email gesendet:

<form action="mailto:student@ufg.ac.at" method="post" name="mein_formular">
< !-- hier stehen die Formularelemente -->
< /form>

Formularelemente

Die folgende Aufzählung enthält die wichtigsten Elemente, die in einem Formular definiert werden können - jeweils mit einem Beispiel, dem zugehörigen Tag und einer kurzen Beschreibung. Der Tag für die meisten Formularelemente heisst <input>. Mit dem Attribut type wird die Art des Formularelements festgelegt, über den Namen (Attribut name) können Formularelemente referenziert werden (Variablenname). Alle anderen Attribute sind nicht immer notwendig und können auch weggelassen werden (siehe dazu die jeweilige Beschreibung).

Eingabefelder

Einzeiliges Textfeld

Geben Sie hier Ihren Namen ein:

<input name="ihr_name" type="text" value="Julius" size="30" maxlength="40">

Das am häufigsten verwendete Formularelement. Breite des Eingabefelds (size) und maximale Länge der einzugebenden Zeichenkette (maxlength) können ebenfalls angegeben werden. Mit value kann ein Anfangswert gesetzt werden.

Passwortfeld

Geben Sie Ihr Passwort ein:

<input name="ihr_pwd" type="password" value="julius">

Ein Passwortfeld ist ebenfalls ein Textfeld. Eingegebener Text wird jedoch nicht explizit sondern maskiert (durch Sternchen) dargestellt, sodass mitlesende Personen das Passwort nicht auf dem Bildschirm sehen können. Im Beispiel wurde der Wert der Variablen ebenfalls mit "julius" vorbelegt. ACHTUNG: Die Übertragung eines Passwortfeldes aus einem Formular erfolgt trotzdem im Klartext!

Mehrzeiliges Textfeld

Ihr Kommentar:

<textarea name="textarea" cols="40" rows="3">Ich war von der gebotenen Vorstellung mehr als begeistert!
Der Hauptdarsteller überzeugte nicht nur durch...</textarea>

In eine textarea kann der Benutzer längeren Text eingeben. Üblicherweise werden Breite (cols) und Höhe (rows) des Textfeldes angegeben. Durch die Breiten- und Höheneingabe ist nur die optische Größe des Textfeldes beschränkt, nicht die Länge des eingegebenen Textes. Übersteigt die Länge des Textes diese angegebenen Maße, so geben die meisten Browser Scrollbalken am Rand des Textfeldes an. Soll das Textfeld vorbelegt werden, so wird der Text zwischen Beginn- und End-Tag gesetzt.

Auswahlelemente

Zum Unterschied von den Eingabeelementen kann der Benutzer hier keine eigenen Angaben eintippen, sondern aus vorgegebenen Werten auswählen. Je nach Element ist auch Mehrfachauswahl zulässig.

Auswahllisten

Auswahllisten werden durch den Tag <select> dargestellt. Dabei können zwei Varianten unterschieden werden:

Selectfelder

<select name="liste1" size="7" multiple>
<option value="1" selected>Montag</option>
<option value="2">Dienstag</option>
<option value="3">Mittwoch</option>
<option value="4">Donnerstag</option>
<option value="5">Freitag</option>
<option value="6">Samstag</option>
<option value="7">Sonntag</option>
</select>

Hier handelt es sich um eine mehrzeilige Liste, die mehrere Auswahlmöglichkeiten bietet. Durch das Attribut multiple wird auch Mehrfachauswahl (durch drücken der Strg-Taste) zugelassen. Size gibt die Anzahl der angezeigten Zeilen an. Falls mehr Einträge als Zeilen vorhanden sind, wird ein Scrollbalken hinzugefügt. Die einzelnen Auswahlmöglichkeiten werden mit dem <option>-Tag angegeben; ein Attribut selected bewirkt hier, dass der Eintrag vorausgewählt wird. Wenn das Formular abgeschickt wird, so werden - sofern angegeben - die Werte (value) der ausgewählten Einträge oder deren Wortlaut übergeben.

Drop-Down-Listen

<select name="liste2">
<option selected>Montag</option>
<option>Dienstag</option>
<option>Mittwoch</option>
<option>Donnerstag</option>
<option>Freitag</option>
<option>Samstag</option>
<option>Sonntag</option>
</select>

Wird für ein Selectfeld die Höhe 1 angegeben (oder die Höhenangabe weggelassen) und keine Mehrfachauswahl ermöglicht, so entsteht eine sog. Drop-Down-Liste.

Radio-Buttons

Anrede:

Frau
Herr
Firma

<input type="radio" name="ihre_anrede" value="Frau">Frau<br>
<input type="radio" name="ihre_anrede" value="Herr">Herr<br>
<input type="radio" name="ihre_anrede" value="Firma">Firma

Eine ähnliche Funktion wie Auswahllisten ohne Mehrfachauswahl erfüllen Radio-Buttons. Hier kann der Benutzer aus einer Aufzählung genau einen Wert auswählen. Radio-Buttons haben den Input-Typ radio. Durch Verwendung eines gemeinsamen Namens wird eine Gruppe gebildet, aus der der Benutzer einen Eintrag auswählen kann. Beim Abschicken des Formulars wird der Wert (value) dieses Eintrags übertragen.

Check-Boxen

Meine Hobbies sind: Reisen
Sport
Lesen
Computer

<input type="checkbox" name="meine_hobbies" value="Reisen">Reisen<br>
<input type="checkbox" name="meine_hobbies" value="Sport">Sport<br>
<input type="checkbox" name="meine_hobbies" value="Lesen">Lesen<br>
<input type="checkbox" name="meine_hobbies" value="Computer">Computer

Mit dem Input-Typ checkbox werden Checkboxen definiert. Checkboxen mit gleichem Namen bilden wieder eine Gruppe. Im Unterschied zu den Radio-Buttons können hier auch mehrere Einträge ausgewählt werden. Die Werte (value) der Einträge werden als Formulardaten übertragen.

Schaltflächen

Submit-Button

<input type="submit" name="Submit" value="Abschicken">

Der Submit-Button ist wohl das wichtigste Formularelement, ohne den das Formular nicht verarbeitet werden kann. Schaltflächen zum Abschicken haben den Input-Typ submit. Das Attribut value bestimmt den angezeigten Text in der Schaltfläche und ist frei wählbar. Je nach aufgerufener Funktionalität kann er auch "Anmelden", "Mail abschicken", "Suchen" o. ä. lauten. Durch drücken des Submit-Button wird die action, die für das Formular festgelegt wurde, ausgeführt.

Reset-Button

<input type="reset" name="Reset" value="Zur&uuml;cksetzen">

Auch für das Löschen aller bisherigen Formulareingaben (setzen auf den Ursprungszustand) wurde eine Schaltfläche vordefiniert, nämlich der Input-Typ reset. Auch hier ist der angezeigte Text beliebig wählbar.

Module, die für die Durchführung vorausgesetzt werden