Hochladen von Dateien mit Formularen
Tag 9
Kapitel 18 - Formulare
Alles, was Sie bisher gelernt haben, hatte etwas
damit zu tun, daß Sie Ihren Lesern Informationen vermittelt haben.
Diese Informationen können einfach nur aus Text und Bildern bestehen
oder multimedial sein, oder es können raffinierte, komplexe Präsentationen
mit Frames, Abbildungsplänen und anderen Zutaten erweiterter Web-Publikationen
sein. Aber im Grunde genommen leisten Sie die gesamte Arbeit, und Ihre
Leser sitzen einfach da, lesen, verfolgen Links und verdauen die Informationen,
die Sie Ihnen präsentiert haben.
Ausfüllbare Formulare ändern das alles. Formulare ermöglichen es Ihnen, Ihre Webseiten aus etwas, das vor allem aus Text und Grafik besteht und das Ihre Leser passiv durchstöbern, in ein interaktives »Spielzeug«, Umfragen oder Präsentationen umzuwandeln, die verschiedene Optionen anbieten können, je nach der Eingabe der Leser.
Formulare gehören zur letzten Hauptgruppe von HTML-Kennungen, die Sie in diesem Buch kennenlernen werden (es bleiben danach noch einige wenige, nicht so wichtige Kennungen übrig). Und im Unterschied zu vielen der anderen Tags, die Sie kennengelernt haben, gehören Formulare zu HTML 2.0 und werden von fast jedem Browser auf dem Markt weitgehend unterstützt. In diesem Kapitel werden Sie den HTML-Teil der Formulare kennenlernen; morgen werden Sie dann etwas über Server-seitige Programme erfahren, mit denen Sie die Informationen verarbeiten, die Sie von den Formularen zurückbekommen. Heute werden Sie insbesondere folgendes kennenlernen:
Die Anatomie eines Formulars
Ein Formular zu erzeugen, erfordert meistens zwei unabhängige Schritte:
das Layout für das Formular selbst zu erschaffen und dann ein Skriptprogramm
auf der Server-Seite zu schreiben (das CGI-Skript oder -Programm genannt
wird), mit dem die Informationen verarbeitet werden, die Sie vom Formular
erhalten. Heute werden Sie die HTML-Seite dieses Vorgangs kennenlernen,
morgen lernen Sie dann alles über CGI-Skripts.
Um ein Formular zu erzeugen, verwenden Sie das <FORM>-Tag.
Innerhalb der eröffnenden und abschließenden
FORM-Tags
befinden sich die individuellen Formularelemente plus aller anderer HTML-Inhalte
(Überschriften, Absätze, Tabellen usw.), mit denen Sie dem Formular
eine Struktur geben. Sie können beliebig viele Formulare auf einer
Seite unterbringen, aber Sie können sie nicht verschachteln - d.h.
Sie können kein <FORM>-Tag
innerhalb eines Formulars verwenden.
Die einleitende Kennung des <FORM>-Tags enthält zwei Elemente: die Übermittlungs-Methode (METHOD) und den Namen des auszuführenden Programms (ACTION). Das METHOD-Attribut kann entweder GET oder POST enthalten, wodurch bestimmt wird, auf welche Weise die Formulardaten zum Skript zur Abarbeitung weitergeleitet werden. Sie werden GET und POST morgen kennenlernen.
Das ACTION-Attribut
ist ein Hinweis auf das Skript, das das Formular auf der Server-Seite verarbeitet.
ACTION
kann durch einen relativen Pfad oder durch eine vollständige URL zu
einem Skript auf Ihrem Server oder auch anderswo angegeben werden. Beispielsweise
würde das folgende <FORM>-Tag
ein Skript namens form-name
in einem cgi-bin-Verzeichnis
auf dem Server www.myserver.com
aufrufen:
<FORM METHOD="POST" ACTION="http://www.myserver.com/cgi-bin/form-name">
...
</FORM>
Sie werden, wie versprochen, morgen mehr über diese beiden Attribute lernen, wenn wir tiefer in die Materie der CGI-Skripts eintauchen. Heute werden wir uns mit einer sehr gewöhnlichen Formularschablone zufriedengeben, die einfach nur das wiederausgibt, was man eingegeben hat, damit wir die Ausgabe unserer Formulare testen können. In jedem der heute verwendeten Formulare werden Sie als Methode POST einsetzen, und die Aktion wird die URL eines speziellen Skripts namens post-query sein:
<FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query">
...
</FORM>
 |
Dieses spezifische Beispiel verwendet das post-query-Skript auf dem Server www.mcp.com (der Server des Herausgebers der amerkanischen Originalausgabe dieses Buches). Da das post-query-Skript ein standardmäßiger Teil des NCSA-Server-Lieferumfangs ist, ist es vielleicht auch auf Ihrem eigenen Server verfügbar. Setzen Sie sich mit Ihrem Web-Master in Verbindung, um zu sehen, ob es auf Ihrem Server existiert; Ihre Formulare werden viel schneller verarbeitet werden, wenn sich eine Kopie des Programms auf einem Rechner in Ihrer Nähe befindet. |
Übung 18.1: Sag mir Deinen Namen
Lassen Sie uns ein einfaches Beispiel ausprobieren, in dem Sie das in
Abbildung 18.1 dargestellte Formular erzeugen. Dieses Formular tut absolut
nichts anderes, als Sie nach Ihrem Namen zu fragen. In diesem Formular
hier würden Sie also Ihren Namen eingeben und den Submit-Button betätigen
(oder, in textbasierten Browsern, die Submit-Verknüpfung
auswählen).
Submit (Übermitteln) ist die Funktion, die alle Formulardaten für die Verarbeitung zurück zum Server schickt. Dann, auf dem Server, würde ein Skript irgend etwas mit diesem Namen anfangen (ihn in einer Datenbank speichern, ihn für die weitere Verarbeitung irgendwohin senden, ihn quer über Times Square pflastern usw.).
| siehe Abbildung | Abbildung 18.1:
Das Formular »Wer bist Du?« |
|
Die meisten Browser bieten eine Abkürzung an: Wenn es auf der Seite nur ein einziges Textfeld gibt (abgesehen von Submit), können Sie einfach die Eingabetaste drücken, um das Formular zu aktivieren. |
<HTML><HEAD>
<TITLE>Tell Me Your Name</TITLE>
</HEAD><BODY>
<H2>Who are you?</H2>
</BODY>
</HTML>
Nun kommt das Formular selbst hinzu. Zuerst fügen
Sie die Schablone für post-query
hinzu, die ich bereits erwähnt habe:
<HTML><HEAD>
<TITLE>Tell Me Your Name</TITLE>
</HEAD><BODY>
<H2>Who are you?</H2>
<FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query">
</FORM>
</BODY>
</HTML>
Wenn das Gerüst an Ort und Stelle ist, können wir die Formularelemente hinzufügen. Beachten Sie, daß <FORM> nicht die Erscheinung und das Layout des Formulars festlegt; dazu müssen Sie andere HTML-Tags einsetzen (und wenn Sie sich die Seite so, wie sie bisher besteht, jetzt in einem Browser ansehen würden, würden Sie auf der Seite nichts entdecken, das einem Formular ähnelt.)
Das erste Element innerhalb des Formulars ist ein Texteingabebereich für den Namen. Als erstes schreiben Sie eine Eingabeaufforderung, und zwar genauso, wie Sie jede andere Textzeile in HTML schreiben würden:
<P>Enter your Name:
Und dann fügen Sie den HTML-Code hinzu, der ein Textfeld kennzeichnet:
<P>Enter your Name: <INPUT NAME="theName"></P>
Die <INPUT>-Kennung kennzeichnet ein einfaches Formular-Element. (Es gibt noch mehrere andere Formular-Elemente, die andere Kennungen als <INPUT> verwenden, aber <INPUT> ist das gebräuchlichste). <INPUT> hat üblicherweise wenigstens zwei Attribute: TYPE und NAME.
TYPE beschreibt die Art des Formularelements. Es gibt dafür mehrere Möglichkeiten, etwa text für Textfelder, radio für Options-Felder (radio-buttons) und check für Kontrollkästchen (check boxes). Wenn Sie das TYPE-Attribut weglassen, wie wir's hier getan haben, so wird das Element zum Textfeld.
Das NAME-Attribut
bezeichnet den Namen dieses Elements. Wenn Ihr Formular zum Server übermittelt
wird, erhält Ihr CGI-Skript, das es verarbeitet, die Eingaben aus
dem Formular als eine Folge von Name/Wert-Paaren. Der Wert enthält
die tatsächliche Eingabe Ihres Lesers, und der Name ist der Wert des
Attributs selbst. Indem Sie hier einen vernünftigen Namen für
jedes Element erfinden, können Sie die Antworten leicht den Fragen
zuordnen.
Sie können hier nehmen, was immer Sie mögen, doch im Rahmen eines guten Programmierstils sollte ein beschreibender Name verwendet werden. Hier haben wir den Namen theName gewählt (hinreichend beschreibend, oder?).
Nun fehlt noch das abschließende Formularelement, der Submit-Button bzw. die Verbindung (in textbasierten Browsern) zum Übermitteln der Eingaben. Die meisten Formulare erfordern die Benutzung eines solchen Elements; wenn Sie jedoch nur ein einziges Textfeld im Formular haben, können Sie's auch weglassen: Die Formulareingaben werden übermittelt, wenn der Leser die (ENTER)-Taste betätigt.
<P><INPUT TYPE="submit"></P>
Auch für dieses Element verwenden Sie die <INPUT>-Kennung.
Das TYPE-Attribut
wird auf den besonderen Typ submit
gesetzt, der dafür sorgt, daß ein entsprechender Button (submit
button in grafischen Browsern) bzw. eine Verknüpfung (in textbasierten
Browsern) erzeugt wird. Der Submit-Button
erfordert keinen Namen, wenn es nur einen einzigen gibt; Sie werden später
lernen, wie Sie Formulare mit mehreren Submit-Buttons
erzeugen.
Eine gute Praxis besteht darin, immer einen Submit-Button in ein Formular aufzunehmen, auch wenn es nur ein einzelnes Textfeld gibt, einfach weil ein solcher Button so gebräuchlich ist, daß Ihre Leser irritiert sein könnten, wenn er einmal fehlt.
Beachten Sie, daß jedes Element auch Kennungen zur Formatierung enthält, gerade so, als wäre es Text. Formularelemente unterliegen den gleichen Regeln wie Text in bezug darauf, wie sie Ihr Browser formatiert. Ohne die <P>-Kennungen hätten Sie alle Elemente des Formulars in derselben Zeile.
Damit haben wir nun also ein einfaches Formular mit zwei Elementen. Der komplette HTML-Code, um dieses Formular zu erzeugen, sieht demnach so aus:
<HTML><HEAD>
<TITLE>Tell Me Your Name</TITLE>
</HEAD><BODY>
<H2>Who are you?</H2>
<FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query">
<P>Enter your Name: <INPUT
NAME="theName"></P>
<P><INPUT TYPE="submit"></P>
</FORM>
</BODY></HTML>
Was passiert also, wenn Sie das Formular übermitteln?
Die Formulardaten werden zurück zum Server gesendet, und das
post-query-CGI-Skript
wird aufgerufen. Das post-query-Skript
tut nichts anderes, als Ihnen die Namen und Werte wieder zurückzuschicken,
die schon in dem ursprünglichen Formular enthalten waren. Abbildung
18.2 zeigt die Ausgabe von einem Formular, das mit meinem Namen darin übermittelt
wurde:
| siehe Abbildung | Abbildung 18.2:
Die Ausgabe von post-query |
Einfaches Formular-Layout
Nachdem Sie jetzt die Grundlagen beherrschen, wollen Sie sicherlich wissen, welche Art von trickreichen Interface-Elementen Sie in ein Formular aufnehmen können.
Im folgenden Abschnitt lernen Sie das <INPUT>-Tag kennen und erfahren, welche einfachen Formularelemente Sie damit erzeugen können. Es gibt noch einige andere Elemente, die Sie für komplexe Formulareingabe verwenden können; die werden Sie später in diesem Kapitel kennenlernen.
Jedes der Elemente aus diesem Abschnitt gehört
in eine <FORM> ... </FORM>-Kennung.
In den folgenden Beispielen werden wir weiterhin das post-query-Skript
als ACTION
des Formulars verwenden, wodurch die eingegebenen Name/Wert-Paare einfach
zurückgesendet werden.
Der Übermittlungs-Button
Übermittlungs-Buttons (Submit-Buttons,
in textbasierten Browsern Übermittlungs-Links; der Einfachheit halber
werden wir sie »Buttons« nennen) weisen den Browser an, die
Formulardaten an den Server zu senden. Sie sollten jedem Formular mindestens
einen Übermittlungs-Button beifügen, obwohl Formulare mit nur
einem Textfeld sie nicht benötigen würden. Um einen Übermittlungs-Button
zu erzeugen, verwenden Sie "SUBMIT"
als TYPE(Typ)-Attribut
bei einer <INPUT>-Kennung:
<INPUT TYPE="SUBMIT">
Sie können den Text auf dem Button durch das VALUE-Attribut bestimmen:
<INPUT TYPE="SUBMIT" VALUE="Submit Query">
Sie können mehrere Übermittlungs-Buttons
in ein Formular aufnehmen, indem Sie das NAME-Attribut
innerhalb eines <INPUT>-Tags
anwenden. Dann werden sowohl der Name als auch der Wert des Übermittlungs-Buttons
an den Server zur Verarbeitung weitergeleitet; wenn Sie Ihr CGI-Skript
schreiben, müssen Sie dann nach diesen Namen/Wert-Paaren suchen, um
herauszufinden, welcher Übermittlungs-Button jeweils betätigt
wurde. Sie könnten beispielsweise Übermittlungs-Buttons innerhalb
eines Formulars für virtuelle Richtungsangaben anwenden, und zwar
folgendermaßen:
<INPUT TYPE="SUBMIT" NAME="left"
VALUE="Left">
<INPUT TYPE="SUBMIT" NAME="right"
VALUE="Right">
<INPUT TYPE="SUBMIT" NAME="up"
VALUE="Up">
<INPUT TYPE="SUBMIT" NAME="down"
VALUE="Down">
<INPUT TYPE="SUBMIT" NAME="forward"
VALUE="Forward">
<INPUT TYPE="SUBMIT" NAME="back"
VALUE="Back">
Das folgende Beispiel zeigt zwei einfache
Formulare mit Submit-Buttons: eines mit einem Standard-Button und eines
mit einem Button, der eine vom Autor bestimmte Beschriftung hat (»Press
Here«). Abbildung 18.3 zeigt die Ausgabe in Netscape, und Abbildung
18.4 zeigt sie in Lynx.
|
Diese Abbildungen zeigen, wie die Buttons in Netscape für den Macintosh erscheinen. Die Buttons sehen in den Netscape-Versionen für andere Plattformen ein wenig anders aus und in anderen Browsern vielleicht völlig unterschiedlich. |
<FORM METHOD=POST ACTION="
<INPUT TYPE="SUBMIT">
</FORM>
<UL>
<FORM METHOD=POST ACTION="
<INPUT TYPE="SUBMIT" VALUE="Press
Here">
</FORM>
| siehe Abbildung | Abbildung 18.3:
Die Ausgabe in Netscape |
| siehe Abbildung | Abbildung 18.4:
Die Ausgabe in Lynx |
Textfelder
Textfelder erlauben Ihren Lesern, einen Text in ein einzeiliges Feld einzugeben. (Für mehrzeilige Felder können Sie die <TEXTAREA>-Kennung verwenden, die ich später in diesem Kapitel beschreibe.)
Um ein Texteingabe-Feld zu erzeugen, können Sie entweder das Attribut TYPE="text" benutzen oder die TYPE-Angabe ganz weglassen. (Der voreingestellte Typ der <INPUT>-Kennung ist text.) Daneben müssen Sie ein NAME-Attribut einfügen; NAME bezeichnet den Namen des Feldes, wie er an das Skript, welches das Formular verarbeitet, übergeben wird.
<INPUT TYPE="text" NAME="myText">
Sie können auch die Attribute SIZE
und MAXLENGTH
in die <INPUT>-Kennung
aufnehmen. SIZE
bezeichnet die Länge des Eingabefelds (in Zeichen); voreingestellt
sind 20 Zeichen. Ihre Leser können so viele Zeichen eingeben, wie
sie wollen; das Feld wird entsprechend der Eingaben Ihrer Leser horizontal
verschoben. Versuchen Sie, SIZE
auf 50 Zeichen zu begrenzen, dann paßt es auf die meisten Bildschirme.
<INPUT TYPE="text" NAME="longText"
SIZE="50">
MAXLENGTH ermöglicht es Ihnen, die Anzahl der Zeichen zu begrenzen, die Ihre Leser in das Textfeld eingeben können (überzählige Zeichen werden zurückgewiesen). Wenn MAXLENGTH kleiner ist als SIZE, zeichnen manche Browser ein Textfeld so groß wie MAXLENGTH.
Abgesehen von normalen Textfeldern gibt es auch Paßwort-Felder, die durch TYPE=password gekennzeichnet sind. Paßwort-Felder sind normalen Textfeldern ähnlich, mit der Ausnahme, daß die eingegebenen Zeichen vom Browser als Sternchen (Asterisk) oder als Punkte getarnt dargestellt werden (vgl. Abbildung 18.5).
<INPUT TYPE="PASSWORD" NAME="passwd">
| siehe Abbildung | Abbildung 18.5:
Paßwort-Felder |
<FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query">
<P>Enter your Name: <INPUT
TYPE="TEXT" NAME="theName"><BR>
Enter your Age:
<INPUT TYPE="TEXT" NAME="theAge"
SIZE="3" MAXLENGTH="3"><BR>
Enter your Address:
<INPUT TYPE="TEXT" NAME="theAddress"
SIZE="80"></P>
</FORM>
| siehe Abbildung | Abbildung 18.6:
Die Darstellung in Netscape |
| siehe Abbildung | Abbildung 18.7:
Die Darstellung in Lynx |
Radio-Buttons
Options-Felder (radio-buttons) kennzeichnen eine Liste von Einträgen, von denen nur einer ausgewählt werden kann. Wird eines dieser Felder aus der Liste gewählt, werden alle anderen Felder derselben Liste deaktiviert.
Options-Felder verwenden radio
als ihr TYPE-Attribut.
Zusammengehörige Gruppen solcher Felder kennzeichnen Sie, indem Sie
dasselbe NAME-Attribut
für alle benutzen. Darüber hinaus muß jedes Options-Feld
ein eigenes VALUE-Attribut
haben, das die jeweilige Auswahl bezeichnet.
<OL>
<INPUT TYPE="radio" NAME="theType"
VALUE="animal">Animal<BR>
<INPUT TYPE="radio" NAME="theType"
VALUE="vegetable">Vegetable<BR>
<INPUT TYPE="radio" NAME="theType"
VALUE="mineral">Mineral<BR>
</OL>
Sie können mehrere, voneinander unabhängige Gruppen von Options-Feldern verwenden, indem Sie unterschiedliche Namen für jede Gruppe verwenden:
<OL>
<INPUT TYPE="radio" NAME="theType"
VALUE="animal">Animal<BR>
<OL>
<LI><INPUT TYPE="radio" NAME="theAnimal"
VALUE="cat">Cat
<LI><INPUT TYPE="radio" NAME="theAnimal"
VALUE="dog">Dog
<LI><INPUT TYPE="radio" NAME="theAnimal"
VALUE="fish">fish
</OL>
<INPUT TYPE="radio" NAME="theType"
VALUE="vegetable">Vegetable<BR>
<INPUT TYPE="radio" NAME="theType"
VALUE="mineral">Mineral<BR>
</OL>
Voreinstellungsmäßig sind alle Options-Felder ausgeschaltet. Sie können das eingeschaltete Voreinstellungs-Feld einer Gruppe mit dem CHECKED-Attribut bestimmen:
<OL>
<INPUT TYPE="radio" NAME="theType"
VALUE="animal" CHECKED>Animal<BR>
<INPUT TYPE="radio" NAME="theType"
VALUE="vegetable">Vegetable<BR>
<INPUT TYPE="radio" NAME="theType"
VALUE="mineral">Mineral<BR>
</OL>
Wird der Formularinhalt übermittelt, so wird
dem Skript ein einzelnes Name/Wert-Paar für die Felder-Gruppe übergeben.
Dieses Paar enthält das NAME-Attribut
der ausgewählten Gruppe und das VALUE-Attribut
jenes Eintrages, der aktuell ausgewählt wurde.
Hier folgt ein Beispiel zweier Gruppen von Options-Feldern
und deren Darstellung in Netscape (Abbildung 18.8) und Lynx (Abbildung
18.9):
<FORM METHOD=POST ACTION="
| siehe Abbildung | Abbildung 18.8:
Die Darstellung in Netscape |
| siehe Abbildung | Abbildung 18.9:
Die Darstellung in Lynx |
Kontrollkästchen (check boxes) machen es möglich, mehrere Einträge zugleich in einer Liste auszuwählen, soviel der Leser wählen möchte. Jedes Auswahl-Feld kann entweder »ein-« oder »aus«geschaltet sein (Voreinstellung ist ausgeschaltet). Auswahl-Felder benutzen checkbox als TYPE-Attribut:
<UL>
<LI><INPUT TYPE="checkbox"
NAME="red">Red
<LI><INPUT TYPE="checkbox"
NAME="green">Green
<LI><INPUT TYPE="checkbox"
NAME="blue">Blue
</UL>
Wird der Formularinhalt übermittelt,
so werden nur die Name/Werte-Paare der ausgewählten Felder an das
Skript übergeben (nichtausgewählte Felder werden ignoriert).
Per Voreinstellung bekommt jedes Name/Wert-Paar eines ausgewählten
Feldes den Wert ON. Sie können auch das VALUE-Attribut
benutzen, um den Wert zu bezeichnen, den Sie statt dessen gern in Ihrem
Skript sehen würden:
<UL>
<LI><INPUT TYPE="checkbox"
NAME="red" VALUE="chosen">Red
<LI><INPUT TYPE="checkbox"
NAME="green" VALUE="chosen">Green
<LI><INPUT TYPE="checkbox"
NAME="blue" VALUE="chosen">Blue
</UL>
Sie können, ähnlich wie bei den Options-Feldern,
auch Listen mit Kontrollkästchen implementieren, die dasselbe
NAME-Attribut
besitzen. Beachten Sie jedoch, daß dies zu mehreren Name/Wert-Paaren
mit demselben Namen führen kann (jedes gewählte Kontrollkästchen
wird dem Skript übermittelt), und Sie müssen das berücksichtigen,
wenn Sie die Eingaben in Ihrem Skript verarbeiten.
So wie bei Options-Feldern können Sie auch das
CHECKED-Attribut
einsetzen, um anzuzeigen, daß ein Kontrollkästchen per Voreinstellung
schon angekreuzt sein soll.
Hier kommt noch eines dieser Ein- und Ausgabebeispiele,
diesmal mit einer Reihe von Kontrollkästchen und deren Darstellung
in Netscape (Abbildung 18.10) und Lynx (Abbildung 18.11).
<FORM METHOD=POST ACTION="
Profession">http://www.mcp.com/cgi-bin/post-query">
<P>Profession (choose all that
apply): </P>
<UL>
<LI><INPUT TYPE="checkbox"
NAME="doctor" CHECKED>Doctor
<LI><INPUT TYPE="checkbox"
NAME="lawyer">Lawyer
<LI><INPUT TYPE="checkbox"
NAME="teacher" CHECKED>Teacher
<LI><INPUT TYPE="checkbox"
NAME="nerd">Programmer
</UL>
</FORM>
| siehe Abbildung | Abbildung 18.10:
Die Darstellung in Netscape (=I-13.11) |
| siehe Abbildung | Abbildung 18.11:
Die Darstellung in Lynx |
Abbildungen
Formulare geben Ihnen eine alternative Methode, Abbildungspläne auszuführen, indem Sie das Attribut TYPE=IMAGE beim <INPUT>-Tag verwenden. Verwenden Sie TYPE=IMAGE mit dem SRC-Attribut, welches den Pfadnamen oder URL zu IMAGE angibt, so wie SRC es für <IMG> tut.
<INPUT TYPE="image" SRC="usamap.gif" NAME="map">
Abbildungen in Formularen verhalten sich wie Abbildungspläne; wenn Sie irgendwo auf dem Bild klicken, wird das Formular zum Server zurückgesendet. Die Koordinaten der Stelle, die Sie angeklickt haben, werden als Teil der Formulardaten zurückgeschickt. Dabei wird der Wert des NAME-Attributs doppelt gesendet, wobei die Koordinaten jeweils als .x und .y hintendrangehängt werden. Wenn z.B. das Bild den Namen map hat, wird die x-Koordinate im map.x-Wert enthalten sein und die y-Koordinate im map.y-Wert.
Im CGI-Skript, das das Formular verarbeitet, werden
Sie diese Koordinaten selber behandeln müssen. Da normale Abbildungspläne
dies viel besser erledigen, wird TYPE=IMAGE
nur noch selten zur Erzeugung von Abbildungsplänen verwendet. Es findet
jedoch viel öfter Verwendung als ein Ersatz für den Übermittlungs-Button.
Da das Bild das Formular übermittelt, wenn es angeklickt wird, können
Sie eine Abbildung anstelle des langweiligen Standard-Übermittlungs-Buttons
einsetzen.
Es ist wichtig zu berücksichtigen, daß
einige Leute immer noch textorientierte bzw. manche sogar sprachorientierte
Browser verwenden. Wenn Sie einen funktionellen Teil Ihrer Formulare über
das Attribut TYPE=IMAGE
realisieren, werden Ihre Formulare für diese Leute unbrauchbar.
Vorgabe-Werte
Jedes Formular-Element kann einen Vorgabewert haben,
der »automatisch« eingegeben oder ausgewählt wird, wenn
das Formular angezeigt wird:
Bei Textfeldern können Sie das VALUE-Attribut mit einer Zeichenfolge als Vorgabewert verwenden. Der Inhalt von VALUE wird automatisch eingegeben, wenn das Formular angezeigt wird.
<INPUT TYPE="reset" VALUE=" Reset Defaults ">
Übung 18.2 Der Surrealisten-Zensus
Lassen Sie uns nun ein komplizierteres Formular-Beispiel
erzeugen. In diesem Beispiel hat sich die Surrealist Society of Amerika
entschlossen, mit Hilfe eines interaktiven Formulars eine kleine Umfrage
im World Wide Web zu veranstalten. Abbildung 18.12 zeigt den Zensus.
| siehe Abbildung | Abbildung 18.12:
Die surrealistische Umfrage |
Beginnen Sie, wie bei allen HTML-Dokumenten, mit
der Grundstruktur. Wir werden wieder das post-query-Skript
verwenden, wie wir es in den vorigen Beispielen getan haben:
<HTML><HEAD>
<TITLE>The Surrealist Census</TITLE>
</HEAD><BODY>
<H1>The Surrealist Census</H1>
<P>Welcome to the Surrealist
Census. Please fill out the following
form to the best of your abilities.</P>
<P>Use <STRONG>Submit</STRONG>
To submit your results.
<HR>
<FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query">
</FORM>
<HR>
</BODY></HTML>
Nun wollen wir das Namens-Element hinzufügen.
Es ist im wesentlichen das gleiche Element, das wir bereits im vorherigen
Beispiel benutzten, diesmal nennen wir es "theName".
<P><STRONG>Name: </STRONG><INPUT
TYPE="TEXT" NAME="theName"></P>
Der zweite Teil des Formulars besteht aus
einer Serie von Options-Feldern für das Geschlecht. Es gibt drei davon:
weiblich, männlich und gar keins (erinnern Sie sich, es handelt sich
um eine Surrealisten-Umfrage). Da Options-Felder sich gegenseitig ausschließen
(nur eines kann zu einem Zeitpunkt ausgewählt sein), werden wir bei
allen drei Options-Feldern denselben Wert für NAME einsetzen
("theSex"):
<P><STRONG>Sex: </STRONG>
<INPUT TYPE="radio" NAME="theSex"
VALUE="male">Male
<INPUT TYPE="radio" NAME="theSex"
VALUE="female">Female
<INPUT TYPE="radio" NAME="theSex"
VALUE="null">Null
</P>
Beachten Sie, daß diese Options-Felder in einer einzigen Zeile dargestellt werden, obwohl sie hier in mehreren Zeilen angeordnet sind. Denken Sie immer daran, daß Formular-Elemente keine Formatierungen beinhalten. Sie müssen andere HTML-Kennungen einfügen, um sie an die richtigen Stellen zu bringen.
Jetzt fügen wir den letzten Teil des Formulars
hinzu: die Kontrollkästchen der »Contains«(Enthält)-Liste:
<P><STRONG>Contains (Select
all that Apply): </STRONG><BR>
<INPUT TYPE="checkbox" NAME="humor">Vitreous
Humor<BR>
<INPUT TYPE="checkbox" NAME="fish">Fish<BR>
<INPUT TYPE="checkbox" NAME="glycol">Propylene
Glycol<BR>
<INPUT TYPE="checkbox" NAME="svga">SVGA
Support<BR>
<INPUT TYPE="checkbox" NAME="angst">Angst<BR>
<INPUT TYPE="checkbox" NAME="catcon">Catalytic
Converter<BR>
<INPUT TYPE="checkbox" NAME="vitamin">Ten
Essential Vitamins and Nutrients<BR>
</P>
Im Unterschied zu Options-Feldern können
beliebig viele Auswahl-Felder ausgewählt werden, so daß jedes
einen anderen Namen bekommt.
Zum Schluß fügen Sie noch den
Button hinzu, mit dem das Formular an den Server geschickt wird. Ein netter
Zug ist auch ein Button zum Löschen der Formular-Eingaben. Beide Knöpfe
haben hier besondere Beschriftungen:
<P><INPUT TYPE="SUBMIT" VALUE="Submit
Your Votes">
<INPUT TYPE="RESET" VALUE="Clear
Form"></P>
Puh! Sind nun alle Elemente an ihrem Platz, so sehen
wir hier, wie die ganze HTML-Datei für das Formular aussieht:
<HTML><HEAD>
<TITLE>The Surrealist Census</TITLE>
</HEAD><BODY>
<H1>The Surrealist Census</H1>
<P>Welcome to the Surrealist
Census. Please fill out the following
form to the best of your abilities.</P>
<P>Use <STRONG>Submit</STRONG>
To submit your results.</P>
<HR>
<FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query">
<P><STRONG>Name: </STRONG><INPUT TYPE="TEXT"
NAME="theName"></P>
<P><STRONG>Sex: </STRONG>
<INPUT TYPE="radio" NAME="theSex" VALUE="male">Male
<INPUT TYPE="radio" NAME="theSex" VALUE="female">Female
<INPUT TYPE="radio" NAME="theSex" VALUE="null">Null
</P>
<P><STRONG>Contains (Select all that Apply):
</STRONG><BR>
<INPUT TYPE="checkbox" NAME="humor">Vitreous
Humor<BR>
<INPUT TYPE="checkbox" NAME="fish">Fish<BR>
<INPUT TYPE="checkbox" NAME="glycol">Propylene
Glycol<BR>
<INPUT TYPE="checkbox" NAME="svga">SVGA Support<BR>
<INPUT TYPE="checkbox" NAME="angst">Angst<BR>
<INPUT TYPE="checkbox" NAME="catcon">Catalytic
Converter<BR>
<INPUT TYPE="checkbox" NAME="vitamin">Ten Essential
Vitamins and Nutrients<BR>
</P>
<P><INPUT TYPE="SUBMIT" VALUE="Submit Your
Votes">
<INPUT TYPE="RESET" VALUE="Clear Form"></P>
</FORM>
<HR>
</BODY></HTML>
Versuchen Sie, unterschiedliche Optionen des Formulars auszuwählen, und sehen Sie, was Sie von post-query zurückgesendet kriegen.
Abbildung 18.13 zeigt das Formular mit den Optionen, die ich ausgewählt habe, und Abbildung 18.14 zeigt die Ergebnisse, die ich zurückgesendet bekam.
| siehe Abbildung | Abbildung 18.13:
Beispiel eines ausgefüllten Surrealisten-Formulars |
| siehe Abbildung | Abbildung 18.14:
Die vom CGI-Programm zurückgeschickten Ergebnisse |
Weitere Formular-Elemente
Neben der <INPUT>-Kennung
mit ihren vielen Optionen gibt es noch zwei weitere Tags, die Formular-Elemente
erzeugen: <TEXTAREA>
für einen größeren Text-Eintrag und <SELECT>,
das in der Lage ist, Pull-down-Menüs und Listen zu erzeugen.
Dieser Abschnitt beschreibt diese anderen beiden Kennungen und erklärt Ihnen, wie Sie »versteckte« Elemente erzeugen können - Formular-Elemente, die nicht auf der Seite sichtbar werden, aber nichtsdestotrotz im Formular vorhanden sind.
Auswahl-Menüs
Auswahl-Menüs gestatten den Lesern
eines Formulars, einen oder mehrere Einträge aus einem Menü oder
einer Liste zu wählen. Sie ähneln Options- und Auswahl-Feldern
in einer etwas abweichenden Form.
Auswahl-Menüs werden durch das <SELECT>-Tag
sowie einzelne darin enthaltene <OPTION>-Kennungen
gekennzeichnet. Das <SELECT>-Tag
enthält zudem ein NAME-Attribut,
um den ausgewählten Wert zu speichern, wenn der Formularinhalt übermittelt
wird.
<SELECT>
und <OPTION>
funktionieren ähnlich wie Listen. Der ganze Abschnitt ist umgeben
von der einleitenden und der abschließenden <SELECT>-Kennung,
und jeder einzelne Eintrag beginnt mit einer einseitigen <OPTION>-Kennung
wie hier:
<P>Select a hair color:
<SELECT NAME="hcolor">
<OPTION>Black
<OPTION>Blonde
<OPTION>Brown
<OPTION>Red
<OPTION>Blue
</SELECT></P>
Wird der Formularinhalt übermittelt, besteht
der ausgewählte Wert aus jenem Text, der auf die gewählte <OPTION>-Kennung
folgt - in diesem Fall also Brown,
Red, Blue usw. Sie können das VALUE-Attribut
auch mit jeder <OPTION>-Kennung
benutzen, um einen Wert zu verwenden, der von dem auf dem Bildschirm dargestellten
abweicht:
<OPTION VALUE="auburn"> Red
Auswahlmöglichkeiten dieser Art werden von grafischen Browsern im allgemeinen als Pull-down-Menüs angezeigt, wie es in Abbildung 18.15 dargestellt ist.
| siehe Abbildung | Abbildung 18.15:
Auswahl-Menüs |
<P>Select a hair color:
<SELECT NAME="hcolor">
<OPTION>Black
<OPTION>Blonde
<OPTION SELECTED>Brown
<OPTION>Red
<OPTION>Blue
</SELECT></P>
Auswahl-Menüs verhalten sich ähnlich
wie Options-Felder, d.h. es kann immer nur ein einziger Eintrag ausgewählt
werden. Sie können das Verhalten von Auswahl-Menüs jedoch ändern,
um auch eine Mehrfachauswahl zu erlauben, indem Sie das MULTIPLE-Attribut
als Teil der <SELECT>-Kennung benutzen:
<<P>Shopping List:
<SELECT NAME="shopping" MULTIPLE>
<OPTION>Butter
<OPTION>Milk
<OPTION>Flour
<OPTION>Eggs
<OPTION>Cheese
<OPTION>Beer
<OPTION>Pasta
<OPTION>Mushrooms
</SELECT></P>
Seien Sie vorsichtig, wenn Sie MULTIPLE
in dem Skript benutzen, das das Formular verarbeitet. Erinnern Sie sich,
daß jedes Auswahl-Menü nur einen möglichen Namen hat. Wenn
Sie also verschiedene Namen in einem Auswahl-Menü haben, werden alle
an Ihr Skript übermittelt, und das Programm, das Sie zum Dekodieren
benutzen, könnte diese auf eine spezielle Art abspeichern.
|
Der Browser legt fest, auf welche Weise der Leser eine solche Mehrfachauswahl treffen kann. Üblicherweise muß der Leser eine Taste gedrückt halten, während er mehrere Einträge auswählt, doch die jeweilige Taste mag sich von Browser zu Browser unterscheiden. |
Wird SIZE
benutzt, so werden die auswählbaren Optionen von grafischen Browsern
in einem Fenster dargestellt, in dem Sie blättern können, und
so viele Einträge sichtbar sind, wie durch SIZE
angegeben wurde. (Abbildung 18.16 zeigt ein Beispiel.)
<P>Shopping List:
<SELECT NAME="shopping" MULTIPLE
SIZE="5">
<OPTION>Butter
<OPTION>Milk
<OPTION>Flour
<OPTION>Eggs
<OPTION>Cheese
<OPTION>Beer
<OPTION>Pasta
<OPTION>Mushrooms
</SELECT></P>
| siehe Abbildung | Abbildung 18.16:
Auswahl-Menüs mit SIZE |
Hier ist ein Beispiel einer einfachen Auswahl-Liste, die in Netscape für den Mac gezeigt wird (Abbildung 18.17). Beachten Sie, daß Auswahl-Listen auf anderen Rechnersystemen oder in anderen Browsern unterschiedlich aussehen können.
<FORM METHOD=POST ACTION="
Select">http://www.mcp.com/cgi-bin/post-query">
<P>Select a hair color:
<SELECT NAME="hcolor">
<OPTION>Black
<OPTION>Blonde
<OPTION SELECTED>Brown
<OPTION>Red
<OPTION>Blue
</SELECT></P>
</FORM>
| siehe Abbildung | Abbildung 18.17:
Die Darstellung mit Netscape |
Textbereiche
Textbereiche sind Felder, in die der Leser Text schreiben
kann. Anders als Textfelder (<INPUT
TYPE="text">) können Textbereiche
mehrere Textzeilen enthalten, was sie außerordentlich nützlich
macht für Formulare, die ausführliche Eingaben erfordern. Wenn
Sie beispielsweise ein Formular entwerfen wollten, mit dem Ihre Leser E-Mails
erstellen können, so könnten Sie einen Textbereich für den
Inhalt der Nachricht benutzen.
<Um einen Textbereich in ein Formular aufzunehmen, benutzen Sie das TEXTAREA>-Tag. <TEXT-AREA> enthält drei Attribute:
Als Beispiel:
<TEXTAREA NAME="theBody" ROWS="14" COLS="50">Enter your message here.</TEXTAREA>
Der Text im Textbereich wird im allgemeinen in einer
Schrift fester Weite (wie »Courier«) dargestellt, aber alle
anderen Formatierungsentscheidungen übernimmt der Browser. Einige
Browser passen den Text automatisch der Größe des Textbereichs
an, während andere ihn weiter nach rechts laufen lassen. Einige erlauben
es, das Feld durch Betätigung der Rollbalken zu vergrößern,
andere lassen keine Eingabe mehr zu, wenn der Textbereich aufgefüllt
ist.
Netscape bietet eine Erweiterung von HTML, die es
erlaubt, das Herumfließen des Textes im Browser zu kontrollieren.
Die Voreinstellung bei Netscape ist, daß Text im Textbereich sich
dem Feld nicht anpaßt, sondern nach rechts weiterfließt; Sie
müssen die Eingabetaste drücken, um die nächste Zeile anzufangen.
Indem Sie das WRAP-Attribut
von TEXTAREA
benutzen, können Sie das Fließverhalten ändern:
WRAP=OFF Die Voreinstellung; der Text erscheint
auf einer einzigen Zeile und schiebt sich weiter nach rechts, bis der Leser
die Eingabetaste betätigt.
WRAP=SOFT
Verursacht zwar, daß der Text sich
im Browser-Fenster automatisch anpaßt, sendet ihn dann aber als eine
einzige Zeile an den Server weiter.
WRAP=HARD
Paßt den Text automatisch dem Browser-Fenster
an; außerdem wird der Text mit Zeilenumbruchzeichen für jede
Stelle, an der eine Zeile umbricht, an den Server geschickt.
Das folgende Beispiel zeigt einen einfachen Textbereich
in Netscape (Abbildung 18.18) und Lynx (Abbildung 18.19).
<FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query">
<P>Enter any Comments you have
about this Web page here:
<TEXTAREA NAME="comment" ROWS="30"
COLS="60">
</TEXTAREA>
</P>
</FORM>
| siehe Abbildung | Abbildung 18.18:
Ein Texteingabefeld in Mosaic |
| siehe Abbildung | Abbildung 18.19:
Ein Texteingabefeld in Lynx |
Versteckte Felder
Ein Wert für das TYPE-Attribut
der <INPUT>-Kennung,
den ich noch nicht erwähnt habe, ist HIDDEN
(versteckt). Versteckte Felder erscheinen nicht auf dem sichtbaren Formular.
Sie sind unsichtbar in der Browser-Darstellung, werden aber nicht verborgen,
falls sich jemand entscheidet, einen Blick auf den HTML-Code Ihrer Seite
zu werfen.
Versteckte Felder werden so erzeugt:
<INPUT TYPE="HIDDEN" NAME="theName" VALUE="TheValue">
Weshalb aber sollten Sie ein verstecktes Formularelement
erzeugen wollen? Wenn es nicht auf dem Bildschirm erscheint, kann der Leser
doch nichts damit machen, was soll das also?
Lassen Sie uns ein hypothetisches Beispiel nehmen. Sie erstellen ein einfaches Formular. In dem Skript, das dieses Formular verarbeitet, erzeugen Sie ein weiteres Formular, basierend auf den Eingaben des ersten Formulars. Das Skript für die Verarbeitung des zweiten Formulars nimmt die Angaben sowohl aus dem ersten wie dem zweiten Formular und erzeugt mit diesen Angaben eine Antwort-Seite. Abbildung 18.20 zeigt, wie das geht:
| siehe Abbildung | Abbildung 18.20:
Von Formular zu Formular zur Antwort |
Wie würden Sie die Angaben aus dem
ersten Formular an das Skript durchreichen, welches das zweite Formular
verarbeitet?
Sie können eine von zwei Möglichkeiten wählen:
Hochladen von Dateien mit Formularen
Ein kürzlich geäußerter Vorschlag
für eine Veränderung der Standarddefinition von Formularen handelt
davon, es zu erlauben, daß Formulare dazu eingesetzt werden können,
ganze Dateien voller Daten zum Server hochzuladen. Dieser Vorschlag hat
Eingang in HTML 3.2 gefunden. Gegenwärtig können Sie zwar eine
Textdatei hinaufschicken, indem Sie sie in den Textbereich eines Formulars
einfügen, es gibt jedoch keine Möglichkeit, eine Bild- oder andere
binäre Datei hochzuladen.
Wenn Sie dennoch mit formularbasiertem Hochladen
von Dateien herumspielen wollen, müssen Sie zwei einfache Veränderungen
am HTML-Code Ihres Formulars unternehmen. Als erstes müssen Sie das Attribut ENCTYPE="mulitpart/form-data"
innerhalb der Formular-Kennung einfügen:
<FORM METHOD=POST ENCTYPE="multipart/form-data"
ACTION="http://www.myserver.com/cgi-bin/uploadit">
...
</FORM>
|
ENCTYPE (Abkürzung für: enclosure type, Art der Beifügung) ist nicht neu; es ist sogar Teil des Standard-HTML-2.0-Codes, und sein Voreinstellungswert ist application/x-www-form-urlencoded. Da die überwältigende Mehrzahl der Formulare diese Standardmethode der Beifügung von Dateien benutzt und nur wenige Browser und Server mit einer anderen Beifügungsmethode umgehen können, brauchen Sie eigentlich nichts über ENCTYPE zu wissen, wenn Sie nicht gerade mit dem Hochladen von Dateien beschäftigt sind. |
Die zweite Komponente, die Sie Ihrem Formular hinzufügen
müssen, ist ein neuartiges <INPUT>-Tag.
Ein neuer Wert für das TYPE-Attribut,
nämlich TYPE-"file",
fügt ein Element zum Hochladen von Dateien ein (nämlich ein Textfeld
und einen Button mit der Beschriftung »Browse« (»Suchen«),
der Sie Ihr lokales Dateisystem nach der Datei durchsuchen läßt).
Hier folgt das Beispiel eines Formulars, das nichts weiter als ein Hochladeelement enthält. Abbildung 18.21 zeigt, wie dies in Netscape dargestellt wird.
<FORM ENCTYPE="multipart/form-data"
ACTION="http://www.myserver.com/cgi-bin/upload"
METHOD=POST>
Send this file: <INPUT NAME="userfile"
TYPE="file">
<INPUT TYPE="submit" VALUE="Send
File">
</FORM>
| siehe Abbildung | Abbildung 18.21:
Ein Formular zum Hochladen einer Datei |
Beachten Sie, daß Sie diesen Formulartyp nicht mit dem bisher von uns verwendeten post-query-Programm testen können, da er zu neu ist. Sie brauchen ein spezielles Skript auf der Server-Seite, wenn Sie formularbasiert hochladen wollen; ich werde noch mehr darüber im nächsten Kapitel erzählen, wenn es um CGI-Skripts geht.
Zusammenfassung
Textfelder, Options-Felder, Kontrollkästchen,
Übermittlungs- und Zurück-Buttons, Auswahl-Listen und Textbereiche
- dies sind alles Formularelemente, die Sie auf Ihren Webseiten integrieren
können, um von Ihren Lesern Informationen zurückzubekommen. Und
in diesem Kapitel haben Sie alles darüber gelernt, wie Sie jedes dieser
Elemente auf Ihrer Webseite einfügen können und wie Sie das Formular
selbst aufbauen, so daß es das richtige Programm auf der Server-Seite
aufruft, wenn es übermittelt wird.
Formulare sind ein Merkmal von HTML 2.0 (und weiter
in HTML 3.2 bzw. HTML 4.0), und die Kennungen für die Erstellung von
Formularen werden in so gut wie allen verfügbaren Browsern weitgehend
unterstützt. Tabelle 18.1 zeigt eine Zusammenfassung der Kennungen
und Attribute, die Sie in diesem Kapitel kennengelernt haben.
Tabelle 18.1: HTML-Kennungen
aus Kapitel 18
Fragen und Antworten
Frage:
Ich habe ein Formular mit einer Gruppe von Options-Feldern, von denen eines ausgewählt werden muß. Wenn mein Formular zuerst im Brower erscheint, ist keines von ihnen ausgewählt, so daß ich keine Werte erhalte, wenn mein Leser keines davon auswählt. Wie kann ich erreichen, daß eines davon ausgewählt ist?
Antwort:
Wenden Sie das Attribut CHECKED an, um ein Voreinstellungs-Options-Feld für die Gruppe festzulegen. Wenn Ihr Leser dies nicht selber ändert, wird der Wert dieses Options-Felds automatisch übermittelt.
Frage:
Es fällt mir schwer, die Formularelemente so auszulegen, wie ich es haben will. Nichts reiht sich richtig aneinander.
Antwort:
Formularelemente, wie auch alle anderen HTML-Elemente, ordnen sich auf dem Bildschirm so an, wie es die Größe des Bildschirms und die Regeln des Browsers für die Anordnung der Elemente auf dem Bildschirm vorschreiben.
Die zweite Lösung besteht
darin, Tabellen ohne Umrandungen einzusetzen. Sie können alle Formularelemente
hübsch anordnen, wenn Sie sie in Tabellenzellen ausrichten.
Meine Formulare enthalten Textbereiche. Wenn ich in Netscape in mein Textfeld tippe, geht die Zeile einfach immer weiter nach rechts, sie bricht nie zur nächsten Zeile um. Muß ich nach jeder Zeile die Eingabetaste betätigen?
Antwort:
Wenn Sie Ihr Formular aufbauen,
können Sie das Attribut WRAP
verwenden, um Netscape anzugeben, wie der Text innerhalb des Textfelds
sich verhalten soll. WRAP=SOFT
wäre hier eine gute Wahl.
