PDF-Skript - Universität Bayreuth

Grundlagen der WWW-Nutzung und
WWW-Programmierung
Alfred Wassermann
Inhaltsverzeichnis
10 Vorlesung
10.1 Interaktion durch Formulare . . . . . . .
10.1.1 Einzeilige Textfelder . . . . . . .
10.1.2 Passwort-Felder . . . . . . . . . .
10.1.3 Mehrzeilige Textfelder . . . . . .
10.1.4 Auswahllisten . . . . . . . . . . .
10.1.5 Radiobuttons . . . . . . . . . . .
10.1.6 Checkboxen . . . . . . . . . . . .
10.1.7 Eingaben absenden, zurücksetzen
10.1.8 Versteckte Elemente . . . . . . .
10.1.9 Dateien übertragen . . . . . . . .
10.1.10 Einfache Buttons . . . . . . . . .
1
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2
2
4
4
4
5
6
6
6
6
7
7
Kapitel 10
Vorlesung
Übungsblatt 09:
10.1
Interaktion durch Formulare
Mit Formularen kann Information vom Betrachter (auch Client genannt) an
den Server übermittelt werden und eine Aktion auf Seite des Servers ausgelöst
werden.
Client
Web-Server
01010101010101010
010010001000100110
00010111110001111
00001111000111001
Formular
Programm
HTML-Datei
Typische Anwendungen sind:
• Fahrplan-Informationen
• Online-Anmeldungen
• Online-Einkaufen
2
• Datenbank-Abfragen
• Gästebuch-Eintragungen
• Registierung bei Software-Download
• Internet-Umfragen ( Polls“)
”
• Steuerung von Programmen
Zwei simple Beispiele zur Verwendung von Formularen sind die 3n + 1-Folge
und die Formelerzeugung Aus technischer Sicht wird vom Client fast in allen
Fällen entweder
• ein Programm auf einem Server gestartet,
• oder eine Email vom Client versandt.
Ein Formular wird durch den <form>-Tag definiert:
<form action="..." method=...>
...
<input type=submit value="start">
</form>
Das Attribut action“ muß einen URL enthalten, der auf ein Programm deutet,
”
das die Angaben des Formulars auswerten kann. Das Attribut method“ kennt
”
zwei mögliche Werte GET und POST. Es bestimmt die Art der Datenübertragung
an das Serverprogramm. Für die meisten Zwecke ist method=POST die richtige
Methode. Arbeitet man mit Frames, so ist auch target= ein mögliches Attribut.
Der Befehl
<input type=submit value="start">
definiert einen Button. Klickt der Benutzer auf diesen Button, werden alle Eingaben an den unter action= spezifizierten URL geschickt. Beispiele für action
sind:
• action="http://btmdx8.mat.uni-bayreuth.de/cgi-bin/test.pl"
• action="mailto:[email protected]"
Kurzübung
Verwendet man mailto, so ist es günstig, als weitere Attribute
<form action=... enctype="text/plain" method=POST>
anzugeben. Durch enctype= werden die Angaben etwas schöner formatiert beim
Empfänger ankommen. Damit der Benutzer mailto“ verwenden kann, muß sein
”
Browser so konfiguriert sein, daß beim Klicken auf den Start-Button (SubmitButton) das email-Programm des Benutzers gestartet wird. Bei der momentanen
Konfiguration der Studenten-Accounts an der Universität Bayreuth ist dies nicht
der Fall.
Ausblick:
Die Art, wie die Daten beim Klicken auf den Submit-Button übertragen werden, ist genau durch das Common Gateway Interface, kurz CGI, spezifiziert.
3
Deshalb heißen die Programme, die meist in einer der zahlreichen InterpreterSprachen geschrieben sind, CGI-Scripts. Prinzipiell können die Daten, die durch
ein Formular an den Server übertragen werden, mit jeder Programmiersprache
ausgewertet werden.
Für Programmierer gibt es praktisch in jeder Programmiersprache Unterprogramme, die das spezielle CGI-Format auswerten können. Da die Programme
meist recht kurz sind, werden sie schnell mal“ in einer Scriptsprache geschrie”
ben. Häufig verwendete Sprachen sind Perl, Python, PHP3. Wie so etwas gemacht wird, wird in einer fortgeschrittenen Veranstaltung der Zusatzqualifikation Multimediakompetenz behandelt werden. Dort werden auch die genauen
Unterschiede zwischen POST und GET betrachtet.
Noch ein Wort zur Sicherheit: Die Daten — auch die Password-Eingaben —
werden im Klartext übertragen, können also relativ leicht abgehört werden.
Wir wollen uns lieber den möglichen Eingabefelder zuwenden. Dies sind typische Elemente, wie sie in jeder Windows-orientierten Betriebssystem-Oberfläche
vorkommen. Wichtig ist, daß jedes Eingabeelement innerhalb eines Formulars
(es können auch mehrere Formulare auf einer HTML-Seite enthalten sein) einen
eindeutigen Namen erhält.
10.1.1
Einzeilige Textfelder
Einzeilige Textfelder werden durch
<input type=text name="..." size=... maxlength=...>
angegeben. Ist kein type-attribut angegeben, wird standardmäßig ein einzeiliges Textfeld angezeigt. size bestimmt die Breite (in Zeichen) des sichtbaren
Eingabebereichs, maxlength bestimt die maximale Anzahl an Zeichen, die der
Benutzer eingeben darf. Will man dem Benutzer Standardtext vorgeben, so gibt
es das Attribut value
<input type=text name="vorname" value="Heinz">
Kurzübung
10.1.2
Passwort-Felder
Fast identisch mit dem Textfeld ist das Passwort-Feld. Es unterscheidet sich
lediglich dadurch, daß die Eingaben, die der Benutzer tippt, als Sternchen auf
dem Bildschirm erscheinen.
<input type=password name="geheimwort">
Kurzübung
10.1.3
Mehrzeilige Textfelder
Für Textfelder, die sich über mehrere Zeilen erstrecken sollen, gibt es den Befehl
<textarea>
<textarea name="..." rows=.. cols=...>
hier steht Standardtext...
</textarea>
4
rows und cols geben die Anzahl der Zeilen und Spalten (in Zeichen) an, über
die sich das Textfeld erstrecken soll.
Für <textarea> gibt es ein Attribut, das den Zeilenumbruch bei der Eingabe
steuert:
• wrap=off fügt keinen automatischen Zeilenumbruch bei der Eingabe ein
(Dies ist die Voreinstellung).
• wrap=virtual fügt automatisch Zeilenumbruch bei der Eingabe ein. Die
Zeilenumbrüche werden aber nicht an den Server übertragen.
• wrap=physical fügt automatisch Zeilenumbruch bei der Eingabe ein und
diese werden auch an den Server übertragen.
Kurzübung
10.1.4
Auswahllisten
Der Benutzer kann ein oder mehrere Elemente aus einer vorgegebenen Liste
auswählen:
<select name="..." size=...>
<option> aaa
<option> bbb
...
<option> zzz
</select name="..." size=...>
Das Attribut size gibt an, wieviel Einträge angezeigt werden sollen. size=1
definiert eine Drop-Down-Liste “(dies ist der Standard, es bedeutet, daß am
”
ursprünglich nur das erste Element der Liste sichtbar ist. Erst beim Klicken
auf das Element wird die gesamte Liste bis zu einer Maximallänge sichtbar).
<option> definiert einen Listeneintrag. Der Abschluß-Tag </option> ist dabei
nicht zwingend erforderlich.
Ist das Attribut multiple angegeben,
<select name="..." multiple>
können mehrere Einträge gleichzeitig ausgewählt werden. Sollen Einträge standardmäßig ausgewählt sein, so gibt man im <option>-Tag das Attribut selected
an.
Kurzübung
An den Server wird dann der Text, der nach <option> steht, übertragen. Im
Beispiel
<option> aaa
wird der Sever den Text aaa erhalten.
Alternativ kann man mit value=... den zu übertragenden Text verändern:
<option value="a"> aaa
Hier bekommt der Server den Text a geliefert.
Kurzübung
5
10.1.5
Radiobuttons
Radiobuttons ermöglichen eine eindeutige Auswahl aus mehrere Alternativen.
Die Anwahl eines Knopfes schaltet alle anderen Radiobuttons mit demselben
Namen aus.
<input type=radio name="schalter" value="1"> rot
<input type=radio name="schalter" value="2"> gr"un
<input type=radio name="schalter" value="3"> blau
Eine Vorauswahl kann mit dem Attribut checked getroffen werden.
Kurzübung
10.1.6
Checkboxen
Das Gegenstück zu Radio-Buttons sind Checkboxen: Es können mehrere Elemente aus einer Gruppe, deren Name übereinstimmt, angewählt werden:
<input
<input
<input
<input
<input
type=checkbox
type=checkbox
type=checkbox
type=checkbox
type=checkbox
name="liste"
name="liste"
name="liste"
name="liste"
name="liste"
value="hose"> Hose
value="rock"> Rock
value="bluse"> Bluse
value="socke"> Socke
value="hemd"> Hemd
Vorauswahlen können mit dem Attribut checked getroffen werden.
Kurzübung
10.1.7
Eingaben absenden, zurücksetzen
Die Eingaben eines Formulars können durch klicken auf den bereits angesprochenen Submit-Button abgeschickt werden:
<input type=submit value="Abschicken">
Das Attribut value bestimmt die Beschriftung des Buttons. Mit
<input type=reset value="Reset">
werden alle Felder des Formulars auf die ursprünglichen Werte zurückgesetzt.
Kurzübung
10.1.8
Versteckte Elemente
Für gewisse Anwendungen, besonders wenn die Kommunikation zwischen Client und Server komplexer wird, ist es erwünscht, gewisse Information für den
Benutzer unsichtbar zu transportieren. Dazu gibt es das versteckte (hidden)
Elemente.
<input type=hidden name="..." value="...">
Ein Beispiel aus SELFHTML:
6
<form name="test" ...>
<input type=hidden name="browser" value="">
...
</form>
<script language="JavaScript">
document.test.browser.value=navigator.userAgent;
</script>
Im versteckten Element browser wird der Name des vom Benutzer verwendeten
Browsers übertragen. Dieser wird mit einem JavaScript-Befehl gesetzt.
Kurzübung
10.1.9
Dateien übertragen
Mit dem Befehl
<form ... enctype="multipart/form-data">
<input type=file maxlength="1000000" name="..." accept="text/*">
</form>
kann eine Datei an das Formular angehängt werden. Die Weiterbehandlung
der Datei auf Server-Seite erfordert jedoch etwas mehr Umstände als andere
Elemente und würde den Rahmen der Veranstaltung sprengen.
10.1.10
Einfache Buttons
Es gibt auch noch die Möglichkeit einfache Buttons zu definieren, die keine Information transportieren. Diese werden normalerweise mit JavaScript angesprochen, d. h. klickt man auf einen dieser Buttons wird ein JavaScript-Programm
ausgeführt, das vom Autor zu bestimmen ist.
Beispiel:
<form ... >
<input type=button value="Zur&uuml;ck" onClick="history.back()">
</form>
JavaScript wird in einer eigenen, späteren Veranstaltung behandelt werden.
Kurzübung
In HTML 4.0 gibt es noch eine Reihe weiterer Attributen und Elementen, die das
Verhalten und Aussehen von Formularen beeinflussen. Meist sind diese jedoch
noch bei keinem Browser realisiert. Daher verweisen wir hier lediglich auf die
Literatur.
7
Literaturverzeichnis
[1] Born, Günter: Referenzhandbuch Dateiformate, Addison-Wesley (1996).
[2] Bruns, B., Gajewski, P.: Multimediales Lernen im Netz, Springer-Verlag
(1999).
[3] Bush, Vannevar: As we may think, in The Atlantic Monthly, July 1945,
siehe http://www.w3.org/History/1945/vbush/
[4] Haaß, Wolf-Dieter: Handbuch der Kommunikationsnetze, Springer-Verlag
(1997).
[5] Hauben,
Michael:
History
of
ARPANET,
http://www.dei.isep.ipp.pt/docs/arpa-Contents.html
siehe
[6] Klau, Peter: Das Internet, Thomson Publishing (1995).
[7] Krol, Ed: Die Welt des Internet, O’Reilly-Verlag (1995).
[8] Levine, John, Young, Margaret: More Internet für Dummies, Thomson Publishing (1996).
[9] Stefan
Münz:
SELFHTML,
http://www.teamone.de/selfhtml
erhältlich
bei
[10] Rost, Martin, Schack, Michael (Hrsg.): Der Internet Praktiker (1995),
Heise-Verlag.
[11] Schulmeister, Rolf: Grundlagen hypermedialer Lernsysteme, AddisonWesley (1996).
8