Der Aufbau eines HTML
Formulars mit allen Formularelementen
Das Formularelement Check Box
Das Formularelement Radio Button
Ein versteckt übergebenes Formularelement
Ein Formularelement, das "JavaScript event handler" bindet
Ein Formularelement, das es ermöglicht x-beliebige
Dateien auf einen Fremdrechner "upzuloaden"
Der Aufbau des Query Strings
| Der
Aufbau eines HTML Formulars mit allen Formularelementen |
|
Die meisten Perl Skripte werden von HTML Formularen angeschoben.
Gästebücher, Autobörsen, Immobilienbörsen,
Chats, Foren, Auktionen, etc. erhalten ihren Input über
HTML Formulare. Das hat erst mal wenig mit Perl zu tun, sondern
ist ein Bestandteil von HTML.
Eine kurze Wiederholung erfolgt anhand eines Beispiels:
<html><head>
<title>Alle Formularelemente auf einen Blick</title></head>
<body>
<form action name=mein_perl_script.pl method=get>
<input type=hidden name=modul value=eins>
Name <input type=texte value="Geben Sie hier Ihren
Namen ein"><br>
<hr>
Wie haben sind Sie auf diese Website gestossen <br>
Tip von Freunden <input type=checkbox name=wie value=Freund>
<br>
über eine Suchmaschine <input type=checkbox name=wie
value=Suchmaschine> <br>
durch Zufall <input type=checkbox name=wie value=Zufall>
<br>
<hr>
Sie sind mänlich <input type=checkbox name=geschlecht
value=m>
weiblich <input type=checkbox name=geschlecht value=weiblich>
<br>
<hr>
Wie gefällt Ihnen diese Website
<select name=gusto><option value=hervorragend>Ich
bin begeistert
<option value="ganz toll">Ich krieg mich kaum
noch ein
<option value=genial>Das Beste dieser Art überhaupt
</select>
<hr>
Ich möchte über Änderungen dieser
Website informiert werden
<input type=checkbox name=informieren> <br>
<hr>
Kommentar<br>
<textarea rows=5 cols=40 name=beitrag>
Sie haben hier die Möglichkeit, uns Verbessserungsvorschläge
zu machen</textarea>
<hr>
Möchten Sie uns auch ein Bild schicken ?<br>
<input type=file name=bild>
<hr>
<input type=button value="passiert nix">
<input type=reset value="Formulardaten löschen"><input
type=submit value=abschicken>
</form>
</body>
</html>
Das Formular zeigt alle Formularelemente.
Drückt man auf den Knopf abschicken, baut der Browser
den Query_String zusammen. Ein genaues Verständnis, wie
dieser Query_String aufgebaut ist, ist für die Internetprogrammierung
unverzichtbar, völlig unabhängig von der gewählten
Technologie: Active Server Pages, CGI Programmierung, Java
Servlets, Cold Fusion etc.
| Das
Formularelement Check Box |
|
Das Element Checkbox taucht in diesem
Formular zweimal auf. Einmal in der Variante, dass es nur
eine Checkbox mit demselben Namen gibt:
<input type=checkbox name=informieren2>
Wird diese Box angeklickt, dann entsteht:
informieren=on bzw. informieren=
wenn diese Box nicht angeklickt wird. Zweitens taucht noch
die Variante auf, dass es eine Checkbox mit demselben Namen
mehrere Male gibt:
<input type=checkbox name=wie2 value=Freund>
<input type=checkbox name=wie2 value=Suchmaschine>
<input type=checkbox name=wie2 value=Zufall> Werden
mehrere Checkboxen mit dem gleichen Namen angeklickt, entsteht
ein Query_String der so aussieht: wie=Freund&wie=Suchmaschine&wie=Zufall
Bei dieser zweiten Variante haben wir insofern
ein Problem, als die Art und Weise, wie der Query_String von
dem verarbeitenden Programm ausgelesen wird, muss modifiziert
werden muss, da es jetzt eine Variable gibt, die mehrere Werte
hat. Wir müssen also dafür sorgen, dass der jeweilige
Wert der Variablen wie nicht den vorhergehenden Wert überschreibt.
Das kann man bei Verwendung des CGI.pm Moduls, siehe Das
Cgi.pm Modul, dadurch erreichen, dass man die Werte an
ein Array übergibt, oder, wenn man die Routine selber
schreibt, die einzelnen Werte in einem Array sichert.
| Das
Formularelement radio button |
|
<input type=checkbox name=geschlecht2
value=m>
<input type=checkbox name=geschlecht2 value=weiblich>
Der Radio Button hat von der Natur der
Sache her einen identischen Namen, denn es kann von einer
"Radio Button Familie" nur ein Element angeklickt werden.
Bei Radio Buttons müssen also alle Elemente den gleichen
Namen haben, da der Browser sonst keine Chance hat, sie als
zusammengehörend zu erkennen. Im übrigen ist man
nicht gezwungen, einen Wert (value) anzugeben, allerdings
ist der Radio Button dann sinnlos, weil dann, egal welcher
Wert angeklickt wurde, immer das gleiche übergeben wird.
| ein
versteckt übergebenes Formularelement |
|
Da die anderen Formularelemente selbsterklärend
sind, bleiben nur noch drei übrig, zu denen es etwas
zu sagen gibt. Da ist hidden:
<input type=hidden name=modul2 value=eins>
Dieses Formularelement wird versteckt
übergeben, das heißt, der User soll es nicht beeinflussen.
(Betonung liegt auf soll. Er kann natürlich die HTML
Seite abspeichern und dann den Wert modifizieren.)
Mit diesem Modul können Variablen übergeben werden,
die den User identifizieren. Dies ist z.B. bei Shops wichtig.
Es können aber auch Variablen übergeben werden,
die das Programm steuern, z.B. wenn ein Skript mehrere Funktionen
hat und entschieden werden muss, welche abgearbeitet werden
sollen.
| ein
Formularelement, das "JavaScript event handler" bindet |
|
Sehr schnell erklärt ist das folgende Formularelement:
<input name="button" type=button
value="passiert nichts">
Dieses
Formularelement hat nur eine einzige Funktionalität,
die darin besteht, dass die JavaScript event handler an dieses
Element gebunden werden können.
| ein
Formularelement, das es ermöglicht x-beliebige Dateien
auf einen Fremdrechner "upzuloaden" |
|
Komplexer ist dann schon dieses Element:
<input type=file name=bild2>
Dieses Formularelement wurde erst sehr viel
später eingeführt. Mit diesem Element wird es möglich,
jede x-beliebige Datei auf den Fremdrechner "upzuloaden".
Dies ermöglicht z.B. bei Anzeigenmärkten die Darstellung
der Waren mit Bild. Wie es eingesetzt wird und Details siehe
Bildupload aus dem Browser.
| der
Aufbau des Query_Strings |
|
Machen wir uns kurz die Struktur des Query_Strings
klar, wenn dieses Formular angeschoben wird. Klar ist, dass
wir nur die Struktur beschreiben, da sich das konkrete Aussehen
ja von Fall zu Fall ändert.
Der Query_String könnte beispielsweise so aussehen:
?modul=eins&wie=Freund&wie=Suchmaschine&ge&geschlecht
=m&gusto=ganz+toll&beitrag=Wahnsinn%2C+hier+geht+ja+voll+die%0D%0APost+ab
Wer das nicht glaubt, der kann den Query_String vom Browser
produzieren lassen. Man schnappt sich das Formular, speichert
es unter ein_geiler_Name.htm und ruft es im Browser auf. Dann
wird ein Inhalt eingetragen und auf abschicken gedrückt.
In der Adressleiste des Browsers erscheint der Query_String
in seiner ganzen Pracht. Der Query_String beginnt nach dem
Fragezeichen. Vor dem Fragezeichen steht normalerweise die
Url, also z.B. http://www.eine_domain.de.
Wir erkennen ein Muster, das so aussieht:
Name_des_ersten_Formularelementes=Wert_des_ersten_Formularelementes&Name
_des_zweiten_Formularelementes=Wert_des_zweiten_Formularelementes
etc.
Wir erhalten also Name/Werte Paare, die durch das kaufmännische
& Zeichen getrennt sind.
Wie dieser Query_String mit Perl ausgelesen wird, siehe Perl
Routine zum Auslesen des QUERY_STRING.
Hier nur kurz die Besonderheiten, die zu beachten sind. Wir
haben zweimal den Namen wie, nämlich wie=Freund und wie=Suchmaschine.
Will man beide Werte retten, muss man sich was einfallen lassen.
Details liefert das Kapitel das
Cgi.pm Modul.
Weiter fällt auf, dass überall dort, wo bei den
Eingaben in die Formularfelder ein Leerzeichen steht, der
Browser dieses Leerzeichen durch ein + Zeichen ersetzt. Dieses
+ Zeichen muss dann hinterher, bei der Auswertung mit Perl,
wieder eliminiert werden.
Sonderzeichen, wie ä,ö,ü,ß,!,§ etc.
werden durch Hexadezimalzeichen ersetzt. Auch das muss wieder
rückgängig gemacht werden.
Der Aufbau des Query_Strings sollte verinnerlicht werden,
da es in der Internetprogrammierung häufig vorkommt,
dass er "mit der Hand" geschrieben werden muss, weil z.B.
schon beim Aufruf eines Perl Programms bestimmte Variablen,
die das Skript steuern, mit übergeben werden müssen.
|
 |
