von Thomas Salvador.
Dieses Tutorial erläutert ausgiebig Formulare in HTML. Sie werden hier alles Wesentliche dazu lernen.
Formulare werden durch den form-Tag gekapselt. Die allgemeine Form ist
<form method="post" action="URL"> ... Formular-Elemente ... </form>
Das Attribut method bestimmt die Methode, mit der das Formular an die URL weitergereicht wird. Mögliche Werte sind post und get. Welcher Wert nun zu nehmen ist, hängt von dem Programm ab, an das die Formulardaten übermittelt werden(siehe action).
(Manche kommen mit beiden Arten klar, andere wurden nur auf eine Übergabeart programmiert und erfordern das dann natürlich auch so.
Das Attribut action bestimmt den Dienst und ggf. die Datei oder das Programm, an die/das das Formular weitergereicht wird. Die Form des URL ist im Kapitel Verweise und Protokolle beschrieben.
Alle Stile sind innerhalb der form Umgebung gültig, insbesondere kann – und dies wird besonders gern gemacht – vorformatierter Text benutzt werden.
Das Formular selber kann aus einzelnen Feldern zusammengesetzt werden.Als Formular-Elemente bietet HTML an:
Syntax und Beispiel:
<input name="einname" type="text" />
erzeugt eine Eingabezeile (type="text"). Die einzelnen Felder werden zur Unterscheidung benannt, damit das Programm, an das das ausgefüllte Dokument weitergeleitet wird, eine Zuordnung treffen kann. Achten Sie darauf, dass der Name in Gänsefüßchen eingeschlossen ist.
Das obige Beispiel erstellt ein irgendwie eingestelltes Eingabefeld. Wie es genau aussieht, hängt vom Browser ab. Es gibt einige Attribute bei input, mit denen man das Aussehen nach Bedarf anpassen kann:
size="XX"maxlength="XX"value="..."Beispiel:
<input name="einname" size="40" maxlength="80" value="Vorgabe" />
erzeugt ein Feld, dass als einname bekannt ist und 40 Zeichen breit dargestellt wird. Die mit "Vorgabe" vorbesetzte Eingabe kann bis zu 80 Zeichen lang werden.
Darüber hinaus gibt es einige Varianten dieses Eingabefeldes. Die Variante wird durch den Wert des type bestimmt:
type="text"Dieser Typ nimmt eine Sonderstellung ein, da er kein Feld erzeugt. Man kann ihn vielmehr als eine reine Wertzuweisung auffassen.
<input type="hidden" name="id" value="dieseId" />
weist der Namen id den (festen) Wert dieseId zu. Damit kann man beispielsweise Werte setzen, die das Formular identifizieren, und muss den Benutzer nicht mit der Eingabe belästigen.
Beispiel:
<form><pre> Name : <input name="name" size="40" maxlength="80" type="text"> Anschrift : <input name="an1" size="40" maxlength="80" type="text"> <input name="an2" size="40" maxlength="80" type="text"> Passwort : <input name="pwd" size="8" maxlength="8" type="password"> </pre></form>
liefert
Die action ist hier in der Tat noch nicht interessant. Die Namen müssen (innerhalb des Formulars) eindeutig und sollten nicht allzu lang sein. Erlaubte Zeichen sind Buchstaben a bis z, A bis Z und Zahlen 0 bis 9.
Grundsätzlich sollten Sie sowohl die Darstellungsbreite als auch die maximale Länge angeben (was im Sinne eines "hübschen" Formulars wahrscheinlich sowieso gemacht wird).
Bislang waren alle Eingabefelder einzeilig. Es besteht aber auch die Möglichkeit, ein mehrzeiliges Feld zur Verfügung zu stellen, praktisch einen kleinen Editor:
<textarea name="einname" cols="XX" rows="XX"> Voreingestellter Text </textarea>
cols legt die Breite des Feldes in Zeichen und rows entsprechend die Höhe in Zeilen an. Üblicherweise stellt der Browser das Feld mit Scrollbars dar, die die Eingabe und das Scrollen durch längere Ausführungen erlauben. Der durch textarea gekapselte Text, sofern vorhanden, wird als voreingestellter Text in das Feld aufgenommen.
Hinweis: Üblicherweise wird der Text in einem (einzeiligen) Feld in Proportionalschrift, in einem mehrzeiligen Feld in Schreibmaschinenschrift dargestellt. Daher meinen gleiche size und cols Werte oft verschiedene Breiten.
Obiges Beispiel (Ausschnitt) können wir also nun etwas eleganter darstellen:
Beispiel:
<form><pre> Name : <input name="name" size="40" maxlength="80" type="text" /> Anschrift : <textarea name="an" cols="40" rows="2"></textarea> </pre></form>
liefert
Hier ist es nun für den Benutzer möglich, umfangreichere Angaben zu machen, etwa neben Straße und Ort noch Postfach oder Land oder sonstwas anzugeben.
Das Gestalten von Formularen ist manchmal gar nicht so einfach, wenn es gut aussehen soll. Da muss man halt solange probieren, bis es so erscheint, wie es soll. Setzt man bspw. den textarea-Block in dieselbe Zeile wie Anschrift, so wird häufig der Label (Anschrift) an der unteren Begrenzung des Feldes ausgerichtet, was genauso ungünstig aussieht.
Nützlich sind hier oft Tabellen, die darüber hinaus auch noch das Problem der bündigen Ausrichtung ohne Vorformatierung lösen können:
Beispiel:
<form> <table> <tr><td>Name</td><td><input name="name" size="40" maxlength="80" type="text"></td></tr> <tr><td valign="top">Anschrift</td><td><textarea name="an" cols="40" rows="2"></textarea></td></tr> </table> </form>
liefert (wenn der Browser des Benutzers den valign unterstützt)
Wenn valign nicht ausgewertet wird, so wäre Anschrift normalerweise zentriert neben dem Zelle, auch nicht so schlecht. Man kann hier seiner Phantasie (fast) freien Lauf lassen.
An den gebrachten Beispielen kann man erkennen, dass die Feldnamen tatsächlich lokal zum Formular gültig sind, also gleichbenannte Felder in anderen Formularen nicht beeinflussen. (Wir hatten z.B. beidesmal an benutzt. Auch wenn Sie in einem der beiden etwas eingeben, bleibt das andere unverändert.)
Die einfache Auswahl ermöglicht aus einer gegebenen Menge von Möglichkeiten genau eine auszuwählen.
Beispiel:
<form> Welchen Internet-Dienst nutzen Sie besonders häufig?<br> <input type="radio" name="dienst" value="www" checked="checked"> World Wide Web<br> <input type="radio" name="dienst" value="ftp"> FTP<br> <input type="radio" name="dienst" value="news"> News<br> </form>
liefert
Der Typ des input-Feldes ist also radio. Sie sehen an diesem Beispiel, dass die Zugehörigkeit zu einer Gruppe über name geregelt wird. D.h., die einzelnen Möglichkeiten müssen nicht notwendig untereinander stehen, Sie können frei in dem Formular gesetzt werden. Dies heißt auch, dass Sie durchaus mehrere solche Gruppen (freilich unter jeweils anderem Namen) in Ihrem Formular platzieren können.
value identifiziert die einzelnen Möglichkeiten. Und die Option checked sagt aus, dass diese Möglichkeit per Voreinstellung ausgewählt ist.
Dieses Feld funktioniert völlig analog zur einfachen Auswahl, nur dass hier aus den vorgegebenen Möglichkeiten beliebig viele auswählbar sind. Beliebig viele heißt eine oder mehrere aber auch keine. Der Typ des input-Tags heißt checkbox.
Beispiel:
<form> Welche Internet-Dienste nutzen Sie?<br> <input type="checkbox" name="dienst" value="www" checked="checked"> World Wide Web<br> <input type="checkbox" name="dienst" value="ftp"> FTP<br> <input type="checkbox" name="dienst" value="news" checked="checked"> News<br> </form>
liefert
Während die Auswahlboxen alle Möglichkeiten anzeigen, zeigt die Auswahlliste jeweils nur einen Ausschnitt an. Ansonsten sind Box und Liste in gewisser Form äquivalent, in der einfachen Auswahl ist eine Option zu wählen, in der mehrfachen Auswahl können entsprechend mehrere Optionen selektiert werden.
Die gesamte Liste wird durch den select-Tag gekapselt, der das übliche Attribute name haben muß. Darüber hinaus kann über das size-Attribut festgelegt werden, wieviele Einträge (hier Optionen genannt) angezeigt werden sollen. Ist die tatsächliche Anzahl von Einträgen größer als der so eingestellte Wert, so kann der Benutzer durch die Liste von Optionen scrollen.
Die einzelnen Optionen werden durch den option-Tag gekapselt, dem als Attribut value die Identifikation der Option mitgegeben wird. Wird value fortgelassen (was der Autor ausdrücklich nicht empfiehlt), so wird die Bezeichnung als Wert geliefert, die in diesem Fall aus genau einem Wort bestehen muss.
Schließlich kann eine Option mittels selected vorselektiert werden. Fehlt eine solche Angabe, so ist die erste Option vorselektiert.
Beispiel:
<form> Mit welchem Prozessor ist Ihr Rechner ausgestattet? <select name="cpu" size="3"> <option value="cpu0"> 8086 </option> <option value="cpu1"> 80186 </option> <option value="cpu2" selected="selected"> 80286 </option> <option value="cpu3"> 80386 </option> <option value="cpu4"> 80486 </option> <option value="cpu5"> Pentium </option> <option value="cpu6"> anderer </option> </select> </form>
liefert
Sie sehen hier, dass der Autor die Optionen schlicht und ergreifend durchnummeriert: einfach und effektiv. Im Beispiel werden drei Optionen untereinander angezeigt, 80286 ist vorselektiert. Es tritt hier das gleiche Problem auf, wie bei den mehrzeiligen Eingabefeldern.
Es lässt sich auch genauso lösen.
Der Autor bevorzugt i.a. size="1". (In diesem Falle kann size auch weggelassen werden.) Damit wird ein Pulldown-Menü erzeugt. Lassen wir im gerade betrachteten Beispiel die Größenangabe weg, so erhalten wir
Man hat hier also schon eine gewisse Gestaltungsfreiheit.
Die mehrfache Auswahl wird völlig analog zur einfachen Auswahl gesetzt. Der select-Tag wird lediglich um das Flag multiple erweitert.
Beispiel:
... <select name="os" size="3" multiple="multiple"> ...
Fügen wir bei den Beispielen zur einfachen Auswahl multiple hinzu, so erwalten wir
bzw.
Beim letzteren sieht man, dass wir hier das Pulldown-Menü nicht einsetzen können. Wird size nicht angegeben, so werden alle Optionen gezeigt. (Funktioniert nur beim Navigator, der IE zeigt nur 4 Einträge). Geben wir size=1 an, so ist die Ausgabe zwar nur eine Zeile hoch, damit kann man aber i.a. nicht übersichtlich auswählen.
In beiden Beispielen bieten sich wieder Tabellen an, um ein "hübschere" Formatierung zu erreichen.
Bisher hatten wir immer action="irgendwas" gesetzt. Dies lag daran, dass wir die Formulare nur editieren, aber nicht versenden konnten. Hierfür sind die Kommandos zuständig, von denen es als spezielle Typen des input-Tags zwei gibt:
<input type="submit" value="OK" />
erzeugt einen Kommandobutton mit dem angegebenen Wert als Bezeichnung (hier: OK). Das Anklicken dieses Buttons führt dazu, wie der Typ vermuten lässt, dass das Formular versendet wird.
<input type="reset" value="Neu" />
erzeugt einen Kommandobutton mit dem angegebenen Wert als Bezeichnung (hier: Neu). Das Anklicken dieses Buttons führt dazu, wie (auch hier) der Typ vermuten lässt, dass die Eingaben gelöscht, genauer auf die Voreinstellung zurückgesetzt wird.
Als Protokolle kommen alle Dienste in Frage, auf die man verweisen kann, häufig wird jedoch das http-Protokoll verwendet. Das Formular wird dabei an ein Programm übertragen, welches die Daten auswertet.
Beispiel:
... <form method="post" action="mailto:thomas.salvador@gmx.net"> ...
Im Beispiel würden die Daten per EMail versendet werden. Alte IE <4 können das nicht. NS hatte nie ein Problem damit.
Üblicherweise warnt der Browser den Benutzer, wenn das EMail-Protokoll verwendet wird, denn dabei gibt der Absender seine EMail-Adresse an die angeschriebene Person weiter.
Ein besserer Weg ist ein Script zu verwenden, ein Programm, welches die Daten empfängt und verarbeitet und ggf. weiterreicht. z.B.:
... <form method="post" action="/cgi-bin/mailit.pl"> ...