Formulare in HTML

1. Definition eines Formulars

Ein HTML-Formular wird durch das Tag <FORM> eingeleitet. Innerhalb dieses Tags wird die auszuführende Aktion und die Art der Informationsübertragung angegeben. Dies geschieht durch die Parameter ACTION und METHOD.

Als auszuführende Aktion kann im Prinzip ein beliebiger URL angegeben werden. Dieser wird dann aufgerufen, sobald der Anwender den Submit-Button (mehr dazu später) betätigt. In der Regel macht jedoch nur die Angabe eines CGI-Skripts oder einer Mailadresse Sinn.

Als Methode sind zwei verschiedene Werte möglich: POST und GET, wobei die Get-Methode der Standardwert ist, wenn keine Methode angegeben wurde. Bei der Get-Methode werde die Daten an den URL des CGI-Skripts angehängt, bei der Postmethode dagegen werden die Daten in den Formularfeldern als zusätzliches IP-Packet übertragen.

Ein Formular muß immer durch ein korrespondierendes </FORM> Tag abgeschlossen werden. Zwischen diesen beiden Tags können alle normalen HTML-Befehle verwendet werden und außerdem die speziellen Befehle, um Eingabefelder zu definieren.

Beispiel:
<!-- Definition eines Formulars -->
<FORM ACTION="mailto:eberl@ip-service.com" METHOD="post">
...
</FORM>

2. Die verschiedenen Eingabefelder

2.0 Ausführungsbuttons:

Ausführungsbuttons sind eigentlich keine richtigen Eingabefelder, stehen aber dennoch am Anfang, da sie eine extrem wichtige Aufgabe erfüllen. Sie ermöglichen es erst, ein mehrzeiliges Formular zum Server zu schicken. Es gibt zwei verschiedene Ausführungsbuttons: den sogenannten Submit-Button und den Reset-Button. Wird der erst genannte betätigt, dann wird das Formular übertragen. Klickt man auf einen Reset-Button, werden alle Eingabefelder auf ihren ursprünglichen Wert zurück gesetzt.

Beispiel: siehe Beispiel zu 2.1

2.1 Texteingabefelder:

Textfelder werden durch die Angabe von <INPUT> innerhalb des Formulars definiert. Steht dieses Tag außerhalb eines Formulars wird es ignoriert.

Über den Paramter TYPE kann die Art der in diesem Textfeld erlaubten Daten angegeben werden. Mögliche Werte sind:
WertArt der Daten
TEXT beliebig (wird im allgemeinen nicht angegeben, da es sich um den Standardwert handelt).
INT es dürfen nur ganze Zahlen eingegeben werden (erlaubte Zeichen: "0-9"). Durch die Angabe von MIN=xx und MAX=xx kann der erlaubte Wertebereich zusätzlich eingeschränkt werden.
FLOAT es dürfen nur Komma-Zahlen angegeben werden (erlaubte Zeichen: "0-9",".")
URL es dürfen nur URL's eingegeben werden (z.B. "http://ip-service.com" oder "mailto:xy@unknown.com")
DATE es dürfen nur gültige Daten in englischer Schreibweise eingegeben werden (z.B. 07-Nov-97)
PASSWORD wie TEXT, allerdings werden die Eingaben entweder nicht, oder als "*" ausgegeben.

Anmerkung: von vielen Webbrowsern (z.B. Netscape) werden alle Typen, außer TEXT und PASSWORD, nicht korrekt ausgewertet.

Die Vorbelegung des Textfeldes kann durch den Parameter VALUE bestimmt werden. Standardmäßig sind die Textfelder leer.

Der Name des Textfeldes wird durch den Parameter NAME festgelegt. Gültig sind beliebige Zeichenketten, allerdings sollte auf Leerzeichen und Sonderzeichen verzichtet werden.

Die Länge des Textfeldes in Zeichen wird kann mit dem Parameter SIZE angegeben werden. Durch die zusätzliche Angabe von MAXLENGTH kann die Eingabe beschränkt werden. Wird auf diesen Paramter verzichtet können unendlich viele Zeichen eingegeben werden.

Beispiel:
<HTML><HEAD><TITLE>Formular-Test</TITLE></HEAD>
<BODY>
<FORM ACTION="http://www.test.com/calc.pl" METHOD="post">
<DL>
<DT>Ergebnis senden an (Email-Adresse)</DT>
<DD><INPUT TYPE="text" NAME="sendto" SIZE=80 MAXLENGTH="80"></DD>
<DT>1. Operand</DT>
<DD><INPUT TYPE="float" NAME="op1" SIZE=10 MAXLENGTH=15></DD>
<DT>Operator</DT>
<DD><INPUT TYPE="text" NAME="optr" VALUE="+" SIZE=1 MAXLENGTH=1></DD>
<DT>2. Operand</DT>
<DD><INPUT TYPE="float" NAME="op2" SIZE=10 MAXLENGTH=15></DD>
</DL>
<HR>
<INPUT TYPE="submit" VALUE="los geht's!!"><BR>
<INPUT TYPE="reset" VALUE="war wohl nix">
</FORM>
</BODY>
</HTML>

2.2 mehrzeilige Eingabefelder:

Mehrzeilige Eingabefelder dienen dazu, längere Texte, z.B. Kommentare und Nachrichten aufzunehmen. Sie werden von dem Tag <TEXTAREA> eingeleitet. In den Parametern COLS und ROWS können sie die Breite und Höhe des Eingabefeldes in Zeichen angeben. Abgeschlossen wird das Textfeld durch das Tag </TEXTAREA>. Alles was sich zwischen den beiden Tags befindet wird als Vorbelegung für das Textfeld interpretiert. Es ist also wichtig, das sie das abschließende Tag nicht vergessen. Sonst wird der Rest ihres HTML-Codes in das Textfeld eingefügt und nicht als Seite interpretiert.

Zusätzlich können sie auch noch durch die Angabe von WRAP den Zeilenumbruch im Textfeld steuern. Sie können hier die Werte VIRTUAL, PHYSICAL und OFF angeben. VIRTUAL ermöglicht den automatischen Umbruch, es werden jedoch keine Zeilenumbruchszeichen übertragen. PHYSICAL erzeugt praktisch ein identisches Verhalten wie VIRTUAL, jedoch werden die Umbruchszeichen mit übertragen. Durch die Eingabe von OFF wird der automatische Zeilenumbruch abgeschaltet. Dies ist die Voreinstellung.

Beispiel:
...
<FORM ACTION="mailto:xy@unknown.com">
Hier k&ouml;nnen sie einen Text eingeben:<P>
<TEXTAREA NAME="long_text" WRAP="physical" COLS=40 ROWS=10>
ein 40 Zeichen breites und 10 Zeichen hohes Textfeld mit diesem Text als Vorbelegung und automatischen Zeilenumbruch.
</TEXTAREA>
<INPUT TYPE="submit" VALUE="los geht's!!">
</FORM>
...

2.3 Auswahllisten:

In Auswahllisten können sie dem Anwender eine feste Liste von Einträgen anbieten, aus der der Benutzer einen oder mehrere auswählen kann. Eine Auswahlliste wird immer von dem Tag <SELECT> eingeleitet und mit dem Tag </SELECT> abgeschlossen. Zwischen diesen Tags befinden sich die Einträge, die jeweils mit <OPTION> eingeleitet werden. Ein schon bei der Anzeige der Liste selektierter Eintrag wird durch <OPTION SELECTED> eingeleitet.

Die Anzahl der angezeigten Listenelemente kann durch den Parameter SIZE in Tag <SELECT> bestimmt werden. Soll Mehrfachauswahl zugelassen werden, dann muß zusätzlich noch MULTIPLE angegeben werden.

Beispiel:
<FORM ACTION="mailto:holy_gral@camelot.com">
<H2>W&auml;hlen sie ihren Favoriten aus:</H2>
<SELECT NAME="top" SIZE=3>
<OPTION> Heino
<OPTION SELECTED> Michael Jackson
<OPTION> Tom Waits
<OPTION> Nina Hagen
<OPTION> Marianne Rosenberg
</SELECT>
<H2>Was fanden sie an diesem Kurs toll?</H2>
<SELECT NAME="best" SIZE=3 MULTIPLE>
<OPTION> gute didaktische Aufbreitung
<OPTION> hervorragendes Skript
<OPTION> ihre(n) Nachbarn/in
<OPTION> nichts.
</SELECT>
<INPUT TYPE="submit" VALUE="los geht's!!">
</FROM>

2.4 Check- und Radiobuttons:

Radiobutton sind eine Gruppe von beschrifteten Buttons, aus denen der Anwender immer nur einen markieren kann. Im Gegensatz dazu können aus einer Gruppe von Checkbuttons immer mehrere (oder keiner) markiert sein.

Check und Radiobuttons bilden immer Gruppen, die durch den gleichen Namen der verschiedenen Felder gekennzeichnet sind. In diesen Gruppen gelten dann die oben genannten Bedingungen. Von der Notation her gleichen die Radio- und Checkbuttons den einzeiligen Textfeldern, als Typ wird hier allerdings CHECKBOX oder RADIO angegeben. Der Parameter VALUE bestimmt in diesem Fall nicht die Voreinstellung, sondern den internen Wert des Buttons.

Beispiel 1:
...
Geben sie die Zahlungsweise an:<P>
<INPUT TYPE="radio" NAME="pay_method" VALUE="invoice"> Bankeinzug
<INPUT TYPE="radio" NAME="pay_method" VALUE="credit_card"> Kreditkarte (bitte korrekten Typ angeben)
<INPUT TYPE="radio" NAME="card_typ" VALUE="visa"> Visa
<INPUT TYPE="radio" NAME="card_typ" VALUE="master"> Mastercard
<INPUT TYPE="radio" NAME="card_typ" VALUE="american"> American Express
...

Beispiel 2:
...
W&auml;hlen sie die Zutaten ihrer Pizza:<P>
<INPUT TYPE="checkbox" NAME="zutat" VALUE="salami">Salami
<INPUT TYPE="checkbox" NAME="zutat" VALUE="sardellen">Sardellen
<INPUT TYPE="checkbox" NAME="zutat" VALUE="pilze">Pilze
...

2.5 anklickbare Bilder:

Anklickbare Bilder stellen dieselbe Funktionalität bereit, wie ein Submit-Button, d.h. das Formuar wird bei der Betätigung übertragen, jedoch können sie zusätzlich auswerten auf welche Stelle im Bild der Anwender geklickt hat. Dies ist vor allem nützlich, um eine Art Menüleiste zu definieren, bei der festgelegt wird, was mit den Informationen aus dem Formular zu geschehen hat. Im allgemeinen wird dieser Typ jedoch nur dazu verwendet, einen besonderen Submit-Button zu realisieren.

Beispiel:
...
<INPUT TYPE="image" SRC="http://ip-service.com/IP/ip1.gif NAME="bild">
...

2.6 versteckte Informationen:

Durch versteckte Informationen können Informationen übermittelt werden, die für den Anwender nicht direkt ersichtlich sind. Dies ist dennoch keine Möglichkeit, den Benutzer auszuspionieren, denn es kann sich nur um statische Information handeln, die direkt im HTML-Code festgelegt ist.

Beispiel:
...
<INPUT TYPE="hidden" NAME="name_der_seite" VALUE="xyz1.html">
...