Fortgeschrittenes Publizieren im World Wide Web
Formulare und CGI-Skripts
Einsatz von Formularen und CGI-Skripts
CGI-Skripts sind eigenständige Programme, die auf dem Webserver ablaufen und die Funktionalität von HTML und damit des WWW erheblich erweitern. Einige wenige Beispiele für Einsatzbereiche von CGI-Skripts sind:
- dynamische Webseiten, die aus einer Datenbank erzeugt werden;
- Interaktion des Benutzers durch Formulare;
- Passwortschutz von Webseiten;
Der typische Ablauf des Zusammenspiels von Browser, Webserver und CGI-Skript ist im folgenden Bild dargestellt:
Einfache Beispiele für CGI-Skripts und Formulare
- Dynamisch mit CGI-Skript erzeugte Webseite
und CGI-Skript im Quelltext (Sprache: Unix-Shell). - Mit CGI-Skript erzeugte Webseite mit Systemkommandos
und CGI-Skript im Quelltext (Sprache: Unix-Shell). - Webseite mit Formular und Eingabemöglichkeit.
Das Formular im Quelltext
und das CGI-Skript im Quelltext (Sprache: Unix-Shell).
Einbinden von Formularen in HTML
Formulare werden mit dem FORM-Tag in Webseiten eingebunden:
<FORM METHOD="GET" ACTION="http://www.fh-fulda.de/cgi-bin/skript.cgi"> ... HTML-Kode mit Formularelementen ... </FORM> |
Das Attribut METHOD gibt die Art der Parameterweitergabe vom Webserver an das CGI-Skript an. Bekannt sind die Methoden GET und POST. Die verwendete Methode ist i.d.R. durch das CGI-Skript vorgegeben. In einer Webseite können mehrere und unterschiedliche Formulare enthalten sein.
Wichtige Formularelemente
1. Einzeilige Texteingabe
Der INPUT-Tag definiert ein einzeiliges Texteingabefeld:
<INPUT NAME="Word" VALUE="" SIZE="40" MAXLENGTH="20"> |
mit den Attributen
- NAME - Name der Eingabe für Auswertung im CGI-Skript
- VALUE - Eingabe des Nutzers, kann vorbelegt sein
- SIZE - Breite des Textfeldes
- MAXLENGTH - Maximale Anzahl von Eingabezeichen
2. Sendebutton
Der INPUT-Tag mit dem Attribut TYPE="Submit" definiert einen Sendebutton zum Absenden des Formulars:
<INPUT TYPE="Submit" VALUE="Absenden!"> |
mit den Attributen
- TYPE - Gibt Art des Buttons an, wobei Submit einen Sendebutton definiert
- VALUE - Text auf dem Button
3. Resetbutton
Der INPUT-Tag mit dem Attribut TYPE="Reset" definiert einen Resetbutton zum Rücksetzen aller Formularfelder:
<INPUT TYPE="Reset" VALUE="Alles löschen!"> |
mit den Attributen
- TYPE - Gibt Art des Buttons an, wobei Reset einen Resetbutton definiert
- VALUE - Text auf dem Button
4. Einfachauswahl (Radiobox)
Der INPUT-Tag mit dem Attribut TYPE="Radio" definiert eine Radiobox, die nur eine einfache Auswahl zulässt:
<INPUT TYPE="Radio" NAME="RWahl" VALUE="Auswahl_A"> A <INPUT TYPE="Radio" NAME="RWahl" VALUE="Auswahl_B"> B <INPUT TYPE="Radio" NAME="RWahl" VALUE="Auswahl_C" CHECKED> C |
mit den Attributen
- TYPE - Gibt Art der Auswahl an, wobei Radio eine Einfachauswahl definiert
- NAME - Name der Auswahl für Auswertung im CGI-Skript
- VALUE - Wert der jeweiligen Auswahl
- CHECKED - Vorauswahl (hier C)
5. Mehrfachauswahl (Checkbox)
Der INPUT-Tag mit dem Attribut TYPE="Checkbox" definiert eine Checkbox, die eine Mehrfachauswahl zulässt:
<INPUT TYPE="Checkbox" NAME="CBWahl" VALUE="Auswahl_1" CHECKED> 1 <INPUT TYPE="Checkbox" NAME="CBWahl" VALUE="Auswahl_2"> 2 <INPUT TYPE="Checkbox" NAME="CBWahl" VALUE="Auswahl_3" CHECKED> 3 |
mit den Attributen
- TYPE - Gibt Art der Auswahl an, wobei Checkbox eine Mehrfach definiert
- NAME - Name der Auswahl für Auswertung im CGI-Skript
- VALUE - Wert der jeweiligen Auswahl
- CHECKED - Vorauswahl (hier 1 und 3)
6. Auswahlmenü
Der SELECT-Tag definiert ein Auswahlmenü:
<SELECT NAME="Auswahl">
<OPTION VALUE="Wahl_1">Menüpunkt 1
<OPTION VALUE="Wahl_2">Menüpunkt 2
<OPTION VALUE="Wahl_3" SELECTED>Menüpunkt 3
<OPTION VALUE="Wahl_4">Menüpunkt 4
</SELECT>
|
Die SELECT-Tags klammern das Auswahlmenü, wobei jede einzelne Auswahl mit dem OPTION-Tag beschrieben wird. Der Text im Auswahlmenü wird nach dem OPTION-Tag angegeben. Die Bedeutung der Attribute ist:
- NAME - Name der Eingabe für Auswertung im CGI-Skript
- VALUE - Wert der jeweiligen Auswahl
- SELECTED - Voreingestellter Menüpunkt (hier der 3. Punkt)
7. Mehrzeiliges Textfeld
Der TEXTAREA-Tag definiert ein mehrzeiliges Textfeld:
<TEXTAREA NAME="Text" ROWS="6" COLS="40">
Zeile 1
Zeile 2
</TEXTAREA>
|
Die TEXTAREA-Tags klammern das Textfeld, wobei voreingestellter Text eingeschoben sein kann. Die Bedeutung der Attribute ist:
- NAME - Name der Eingabe für Auswertung im CGI-Skript
- ROWS - Anzahl von Zeilen
- COLS - Anzahl von Spalten
Der INPUT-Tag mit dem Attribut TYPE="Hidden" definiert eine versteckte Variable, die vom Nutzer nicht beeinflusst werden kann und vom CGI-Skript benötigt wird:
(Die mit TYPE="Hidden" definierte Variable ist unsichtbar!)
<INPUT TYPE="Hidden" NAME="Mail" VALUE="karl@abc.de"> |
mit den Attributen
- NAME - Name der Eingabe für Auswertung im CGI-Skript
- VALUE - Eingabe des Nutzers, kann vorbelegt sein
Übungen
- Einfaches Formular mit Eingabefeld und Sendebutton
Skript: http://www.fh-fulda.de/~klingebiel/pub-www2/cgi/echo.cgi.
Lösung: cgi-ueb1.htm, HTML-Quelle. - Formular zur Passworteingabe
Das Eingabefeld für Passworte wird mit dem INPUT-Tag und dem Attribut TYPE="Password" definiert.
Skript: http://www.fh-fulda.de/~klingebiel/pub-www2/cgi/echo.cgi.
Lösung: cgi-ueb2.htm, HTML-Quelle. - Einfaches Mailformular mit mailto-Action
Statt eines CGI-Skripts wird der mailto-URL verwendet.
Erste Lösung: cgi-ueb3.htm, HTML-Quelle mit der EMail-Anwort: cgi-ueb3.mail.txt.
Verbesserte Lösung: cgi-ueb4.htm, HTML-Quelle mit dem FORM-Attribut ENCTYPE="text/plain" und der EMail-Antwort: cgi-ueb4.mail.txt. - Komplexes EMail-CGI-Skript mail.pl mit Prüfungen (Sprache: Perl)
Skript: http://www.fh-fulda.de/cgi-bin/mail.pl.
Lösung: cgi-ueb5.htm, HTML-Quelle mit der EMail-Antwort: cgi-ueb5.mail.txt.
Einige Links zu Formularen und CGI
- Kapitel Formulare aus Stefan Münz Bestseller SELFHTML
- Kapitel CGI/Perl aus Stefan Münz Bestseller SELFHTML
- Webster's Webmaster Archiv: CGI und Perl mit vielen Skripts