Formulare


... [ Seminar WWW und JAVA ] ... [ Thema CGI ] ... [ Codierung ] ...

Formulare


Sinn und Zweck von Formularen

Formulare bieten die Möglichkeit

Wenn das Formular fertig ausgefüllt ist, kann es der Anwender per Mouseclick zur Auswertung an den Server senden => gleichartig strukturierte Daten, die mit einer entsprechenden Software-Schnittstelle automatisch verarbeitet werden können.


Formular definieren

<form action="http://domain/pfad/datei" method=post> ... Elemente des Formulars ...

</form>

<form ... > leitet ein Formular ein. </form> schließt ein Formular ab. Innerhalb des einleitenden Tags für das Formular folgen zwei Angaben: action= ... und method=... .

action= gibt die Internet-Adresse an, zu der das ausgefüllte Formular geschickt werden soll. "datei" ist dabei ein Programm oder ein Shellscript (Batch-Datei), das die ankommenden ausgefüllten Formulare weiterverarbeitet.

method= gibt die Methode an, mit der die Formulardaten an den Server-Rechner übermittelt werden. Möglich sind hier die Angaben method=post oder method=get.

get : die Daten des ausgefüllten Formulars werden an die URL-Angabe angehängt und dann vom Server in der Standard-Umgebungsvariablen QUERY_STRING gespeichert. Das CGI-Programm muß den Inhalt dieser Umgebungsvariablen auslesen und verarbeiten.

post : die Daten des ausgefüllten Formulars werden als eigenständiger Datenstrom an den Server-Rechner gesandt. Der Server stellt die Daten dem CGI-Programm über die Standardeingabe "stdin" bereit, und das Skript muß die Daten behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde. Da in diesem Fall kein EndOfFile-Signal (EOF) gesendet wird, muß das CGI- Programm die Standard-Umgebungsvariable CONTENT_LENGTH auslesen, um die Länge der übermittelten Daten und damit deren Ende zu ermitteln.


Eingabefelder

Formulartext:

<form action="http://domain/pfad/datei" method=post>

<input NAME="varname" TYPE=Eingabetyp SIZE=16 maxlength=16>

</FORM>

Einzeilige Eingabefelder dienen zur Aufnahme von einem bzw. wenigen Wörtern oder einer Zahl und werden, wenn sie das einzige Formularfeld sind, durch das Betätigen der Enter/Return-Taste abgeschickt.


Mehrzeilige Eingabefelder

Mehrzeilige Eingabefelder dienen zur Aufnahme von Notizen, Nachrichten usw.

Code:

Was hat Ihnen an unserem Produkt gefallen und was nicht?<p>

<FORM action="http://domain/pfad/datei" method=post>

<textarea name="feedback" rows=10 cols=50></textarea>

</FORM>

Resultat: Was hat Ihnen an unserem Produkt gefallen und was nicht ?

<textarea ... leitet ein mehrzeiliges Eingabefeld ein. Jedes mehrzeilige Eingabefeld muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name="..."

Dahinter folgen zwei Angaben zur Anzeigegröße des Textfelds. rows= bestimmt die Anzahl der angezeigten Zeilen, cols= die Anzahl der angezeigten Spalten.

Mit </textarea schließen Sie das mehrzeilige Eingabefeld ab. Wenn Sie das Eingabefeld mit Text vorbelegen wollen, notieren Sie den gewünschten Text zwischen <textarea...> und </textarea>.

Mit der Zusatzangabe wrap= können Sie den Zeilenumbruch steuern. Mit wrap=virtual bewirken Sie, daß der Text bei der Eingabe automatisch umgebrochen wird. Beim Absenden des Formulars werden jedoch keine Zeilenumbruchzeichen übertragen. Mit wrap=physical bewirken Sie, daß der Text bei der Eingabe automatisch umgebrochen wird. Die Zeilenumbruchzeichen werden beim Absenden des Formulars mit übertragen. Mit wrap=off stellen Sie den Zeilenumbruch aus (Voreinstellung).


Auswahllisten

Auswahllisten können dem Anwender eine Liste mit festen Einträgen anbieten, aus der er einen oder mehrere Einträge auswählen kann. Der Text des oder der ausgewählten Einträge wird übertragen, wenn der Anwender das Formular abschickt.

Code:

Wir empfehlen Ihnen folgenden Favoriten:<p>

<FORM action="http://domain/pfad/datei" method=post>

<select name="top5" size=3>

<option> Heino

<option> Michael Jackson

<option selected> Tom Waits

<option> Nina Hagen

<option> Marianne Rosenberg

</select>

</FORM>

Resultat:

Wir empfehlen Ihnen folgenden Favoriten:

<select ...> leitet eine Auswahlliste ein. Jede Auswahlliste muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name="..."

size= bestimmt die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Wenn die Liste mehr Einträge enthält als angezeigt werden, kann der Anwender in der Liste scrollen.

<option> definiert jeweils einen Eintrag der Auswahlliste. Hinter <option> muß der Text des Listeneintrags stehen.

</select> schließt die Auswahlliste ab


Auswahllisten mit Mehrfachauswahl

Per Voreinstellung kann der Anwender einen Eintrag aus einer Auswahlliste auswählen. Wenn Sie eine Mehrfachauswahl erlauben wollen, müssen Sie dies gesondert angeben.

Durch die zusätzliche Angabe von multiple im einleitenden Tag von <select ...> wird die Mehrfachauswahl möglich.

Um einen Eintrag der Auswahlliste vorzuselektieren, gibt man im Tag <option...> des betreffenden Eintrags den Zusatz selected an.

Die Mehrfachauswahl wird durch gedrückt-halten der STRG-Taste während des Auswahlvorganges möglich.


Radiobuttons

Radiobuttons sind eine Gruppe von beschrifteten Buttons, aus der der Anwender einen markieren kann. Es kann immer nur einer der Buttons markiert sein. Einer ist stets markiert.

Der anzugebende Wert des oder der markierten Buttons wird übertragen, wenn der Anwender das Formular abschickt.

Code:

Geben Sie Ihre Zahlungsweise an: <p>
<FORM action="http://domain/pfad/datei" method=post>

<input type=radio name="paymethod" value="mastercard"> Mastercard

<input type=radio name="paymethod" value="visa"> Visa

<input type=radio name="paymethod" value="americanexpress"> American Express

</FORM>
Resultat:

 Geben Sie Ihre Zahlungsweise an:
Mastercard Visa American Express

Radiobuttons werden durch das Tag <input ...> eingeleitet. Dahinter folgt die Angabe type=radio. Jeder Radiobutton muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name="...". Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren.

Mit der Angabe value= bestimmen Sie einen internen Bezeichnerwert für jeden Radiobutton. Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des markierten Buttons übertragen. Setzen Sie den Bezeichnerwert in Anführungszeichen.


Checkbuttons

Checkbuttons sind eine Gruppe von beschrifteten Buttons, aus der der Anwender keinen, einen oder mehrere markieren ("ankreuzen") kann.

Der anzugebende Wert des oder der markierten Buttons wird übertragen, wenn der Anwender das Formular abschickt.

Code:

Geben Sie bei der Pizzabestellung die gewünschten Zutaten an:<p>

<FORM action="http://domain/pfad/datei" method=post>

<input type=checkbox name="zutat" value="salami"> Salami

<input type=checkbox name="zutat" value="pilze"> Pilze

<input type=checkbox name="zutat" value="sardellen"> Sardellen

</FORM>
Resultat:
Geben Sie bei der Pizzabestellung die gewünschten Zutaten an:

Salami
Pilze
Sardellen

Checkbuttons werden durch das Tag <input ...> eingeleitet. Dahinter folgt die Angabe type="checkbox". Jeder Checkbutton muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name="...". Alle Checkbuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender keinen, einen oder mehrere ankreuzen.

Mit der Angabe value= bestimmen Sie einen internen Bezeichnerwert für jeden Checkbutton. Wenn der Anwender das Formular abschickt, werden die Bezeichnerwerte des oder der angekreuzten Buttons übertragen. Setzen Sie den Bezeichnerwert in Anführungszeichen.


Ausführungsbuttons

Zwei Buttons stehen zum Beenden zur Verfügung: "Absenden" und "Abbrechen". Mit "Absenden" schickt der Anwender das Formular ab. Mit "Abbrechen" werden alle Eingaben gelöscht und Auswahlmöglichkeiten auf die voreingestellten Werte zurückgestellt.

<FORM action="http://domain/pfad/datei" method=post>
<input type=submit value="Formular abschicken">.
<input type=reset value="Eingaben verwerfen">.
</FORM>

Ausführungsbuttons werden durch das Tag <input ...> eingeleitet. Dahinter folgt die Angabe type=, und zwar:

Mit der Angabe value= bestimmen Sie die Beschriftung der Buttons. Der Beschriftungstext muß in Anführungszeichen stehen.


Frei definierbare Buttons

Frei definierbare Buttons, sind Schaltflächen, die beliebig beschriftet werden können. Jedoch sind diese im Zusammenhang mit "normalem" HTML meist nicht sinnvoll nutzbar, bekommen aber einen Sinn, wenn mit Java-Appletts gearbeitet wird und Funktionen ausgelößt werden sollen.

Beispiel :

<FORM action="http://domain/pfad/datei" method=post>

<input type=button value="Drück mich">

</FORM>


Versteckte Elemente

Versteckte Felder sind z.B. wichtig, wenn man mit mehrstufigen CGI-Skripten arbeitet. Das heißt, wenn ein erstes Skript Ausgabedaten ausgibt, die als Eingabedaten eines zweiten Skriptes dienen sollen. Solche Daten können in versteckten Feldern auf einer HTML-Seite untergebracht werden.

<input hidden value="Vor- und Zuname:"> Vor- und Zuname: <input name="username" size=40 maxlength=60><p>


... [ Seminar WWW und JAVA ] ... [ Thema CGI ] ... [Formulare] ... [ Codierung ] ...