JavaScript- Beispiele für Formulare finden Sie hier. Hinweise zu Event- Handlern finden Sie hier. Informationen zur Gestaltung mit CSS finden Sie hier.
Mit Hilfe von Formularen stellen Sie Ihren Besuchern eine Möglichkeit zur Verfügung, Eingabefelder auszufüllen, in mehrzeiligen Textfeldern Text einzugeben und aus Listen Einträge auszuwählen, um das fertig ausgefüllte Formular durch einen Klick auf einen Button abzusenden.
Was mit den Daten des ausgefüllten Formulars geschieht, können Sie beim Erstellen des Formulars bestimmen. Sie können sich die ausgefüllten Daten beispielsweise per E-Mail zuschicken lassen oder von einem CGI-Programm auf dem Server-Rechner weiterverarbeiten lassen.
<form action="..." method=.... [enctype="text/plain"]> ... Elemente des Formulars ... </form>
Die Methode GET
Wenn ein Formular die Methode GET verwendet, wird der Formulardatenstrom, durch ein Fragezeichen von dem URL des verarbeitenden CGI- Scripts getrennt, als Query-String angefügt. Im Client- Browser sind die Daten des Formulardatenstroms nach dem Absenden des Formulars in der URL- Zeile sichtbar. Die Daten des ausgefüllten Formulars werden in der CGI-Umgebungsvariablen QUERY_STRING gespeichert. Das CGI-Programm muß den Inhalt dieser Umgebungsvariablen auslesen und verarbeiten.
Ein QUERY_STRING, der einem CGI- Programm übergeben wird, kann so aussehen:
$str="Hallo+diese+Zeichenfolge+muss+wieder+dekodiert+werden&zeichen1=%25&wert=1"
QUERY_STRING ist entsprechend dem URL- Encoding- Verfahren kodiert. Bevor der Inhalt des Strings weiterverwendet werden kann, ist dehalb eine entsprechende Dekodierung erforderlich (siehe CGI).
Die Methode POST
Wenn Sie method=post wählen, werden die Daten des augefüllten Formulars dem CGI- Script über "stdin" zur Verfügung gestellt, und das CGI-Programm muß sie behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde (post = verschicken). Da in diesem Fall kein EndOfFile-Signal (EOF) gesendet wird, muß das CGI-Programm die CGI-Umgebungsvariable CONTENT_LENGTH auslesen, um die Länge der übermittelten Daten und damit deren Ende zu ermitteln. Um an die Daten heranzukommen, muss das CGI- Script also die Standardeingabe auslesen, z.Bsp.:
read(STDIN, $Form_Dat, $ENV{'CONTENT_LENGTH'});
Bei der Post- Methode bleibt der in der 'action=' angegebene URL unverändert, die Daten werden für den Benutzer unsichtbar an den Server übertragen, was insbesondere auch aus Datenschutzgründen von Vorteil ist.
Wenn Sie sich Formulardaten per E-Mail zuschicken lassen, benutzen Sie immer method=post. Außerdem sollten Sie bei E-Mail-Empfang von Formulardaten immer die Angabe enctype="text/plain" mit angeben.
Einzeilige Eingabefelder
Einzeilige Eingabefelder verwenden Sie, um einzelne Werte zu erfassen
Ihr Vorname: <input name="Vorname" size=50 maxlength=50>
Mit input definieren Sie ein einzeiliges Eingabefeld. Optional können Sie die Angabe type=text dazusetzen.
Jedes Eingabefeld muß einen eindeutigen, internen Bezeichner erhalten, und zwar mit der Angabe name=. Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten. Verwenden Sie als Sonderzeichen höchstens den Unterstrich "_". Setzen Sie den Namen in Anführungszeichen.
Bei einzeiligen Eingabefeldern sollte immer die darzustellende Zeichenlänge mit size= sowie die maximale Feldlänge maxlength= bestimmt werden.
Mit value="....." können Sie Felder mit Werten vorbelegen.
Mit type=password können Sie die Anzeige der Eingabe in Klarschrift unterdrücken. Statt dessen werden nur Sternchen angezeigt.
Mit dem Attribut readonly können Sie ein Eingabefeld auf "nur lesen" setzen. Dies ist dann sinnvoll, wenn Sie das Eingabefeld als Ausgabefeld, beispielsweise im Zusammenhang mit einem Textticker auf JavaScript- Basis.
Mehrzeilige Eingabefelder
<textarea name="Mehrzeiler" rows=10 cols=50></textarea>
Entgegen einzeiligen Eingabefeldern müssen mehrzeilige Eingabfelder mit einem abschliessenden Tag (</textarea>) versehen sein. Mit name= vergeben Sie dem Feld einen eindeutigen Bezeichner. rows definiert die angezeigte Anzahl der Zeilen, cols die angezeigte Breite.
Eine Vorbelegung mit Text erreichen Sie, indem Sie den Text zwischen öffnenden und schliessenden Tag schreiben:
<textarea name="Mehrzeiler" rows=10 cols=50>Belegen Sie so das Feld mit Text vor.</textarea>
Bei mehrzeiligen Eingabefeldern kann es sinnvoll sein, den Zeilenumbruch zu steuern. Hierfür stehen Ihnen drei Möglichkeiten zur Verfügung:
Mit wrap=off, der Standardeinstellung, schalten Sie die Umbrechung der Zeilen aus, mit wrap=virtual erreichen Sie, dass die Zeilen zwar auf dem Bildschirm automatisch umgebrochen werden, bei der Versendung des Formulars erfolgt jedoch keine Zeilenschaltung. Mit wrap=physical schlussendlich wird der Text auch mit Zeilenumbruch versendet.
<select name="meineListe" size=4> <option>1.Wahl <option>2.Wahl <option>3.Wahl <option>4.Wahl <option>5.Wahl </select>
Eine Auswahlliste wird mit <select> eingeleitet und jeweils mit </select> abgeschlossen. Eine Auswahlliste muß einen internen Bezeichnernamen erhalten, durch Angabe von name.
Mit dem Attribut size bestimmen Sie 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. Wenn Sie size=1 angeben, definieren Sie eine sogenannte "Drop-Down-Liste".
Eine Mehrfachauswahl erreichen Sie durch Angabe des Attributs multiple.
<option> definiert jeweils einen Eintrag der Auswahlliste. Hinter <option> muß der Text des Listeneintrags stehen. Sie können so viele Listeneinträge definieren wie Sie wollen.
Eine Vorselektion definieren Sie durch den Zusatz selected im Option- Tag.
Durch Angabe des Attributes value bestimmen Sie einen Wert eines Eintrags, falls dieser vom Text des Eintrags abweichen soll.
Eine interessante Möglichkeit in Verbindung mit JavaScript oder CGI- Anwendungen ist die Definierung versteckter, für den Anwender unsichtbarer Formularfelder. Beim Absenden des Formulars werden die Daten versteckter Felder mit übertragen.
Ein JavaScript kann Formularfelder auslesen und deren Werte auch ändern, daher besteht die Möglichkeit, Daten zu speichern, die nicht angezeigt, jedoch von einem JavaScript gelesen und weiterverarbeitet werden.
<input type=hidden name="einName" value="einWert">
Mit type=hidden definieren Sie versteckte Daten in einem Formular. Den Wert bestimmen sie mit der Zusatzangabe value.
<input type=radio name="einName" value="1.Wert"> 1.Wert <br> <input type=radio name="einName" value="2.Wert"> 2.Wert <br> <input type=radio name="einName" value="3.Wert"> 3.Wert
Radiobuttons und Checkboxen werden durch input definiert. Dahinter erfolgt durch die Angabe type die Bestimmung, ob eine Checkbox (=checkbox) oder ein Radiobutton (=radio) eingesetzt werden soll. Jede(r) Radiobutton/Checkbox muß eine(n) Bezeichnernamen erhalten, und zwar mit dem Attribut name. Alle Radiobuttons/Checkboxen, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann genau einer markieret werden.
Mit dem Attribut value bestimmen Sie einen Wert für jeden Radiobutton/Checkbox.
Hinter dem <input>-Tag geben Sie den Text ein, mit dem der Button bei der Anzeige im Browser beschriftet werden soll.
Sie können bei Radiobuttons einen Eintrag und bei Checkboxen einen oder mehrere Einträge mittels checked vorselektieren.
Klickbuttons (Standard)
<input type=button value="KlickMich" onSubmit="einEvent()">
Mit type=button definieren Sie einen Button. Die Beschriftung des Buttons bestimmen sie mit value. Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie einen JavaScript Event-Handler verwenden.
Einen Button zum Versenden eines Formulars definieren Sie mit <input type="submit" value=" Absenden ">, einen Button zum Abbrechen mit <input type="reset" value=" Abbrechen ">.
Klickbuttons grafisch
<button name="KlickMich" type="button" value="einWert" onClick="einEvent()"> <img src="bild.gif" alt="einBild"> </button>
Die Definition eines solchen Buttons leiten Sie mit <button> ein. Dieses Tag hat ein Abschluß-Tag </button>, mit dem Sie die Definition abschließen.
Innerhalb von <button>...</button> geben Sie die Grafikreferenz ein, die als Beschriftung des Buttons dient.
Mit type definieren Sie die Art des Buttons. Hier gibt es drei Möglichkeiten, einen normalen Button (button), einen Button zum Absenden des Formulars ( submit) und einen Button zum Abbrechen (reset).
Mit dem Attribut name können Sie einen Namen für den Button vergeben. Unter diesem Namen ist der Button beispielsweise in JavaScript ansprechbar. Mit dem Attribut value können Sie eine Beschriftung für den Button bestimmen, falls Sie keinen Inhalt innerhalb von <button>...</button> notieren.
Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie einen JavaScript Event-Handler verwenden.