vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 3

Tag 20

Formulare

Formulare sind eine der wichtigsten Möglichkeiten der Interaktion zwischen dem Betrachter einer Webseite und dem Ersteller der Seite. Als Konkurrenztechnik gibt es nur noch den Fall einer einfachen Email, wobei in der Webseite einfach an irgendeiner Stelle eine entsprechende Referenz der Form

<A href="mailto:[Email-Adresse]">[anzuzeigender Text]
</A>

notiert wird, oder die Verwendung eines Gästebuches, was aber entweder recht aufwendig ist und Serverzugriff voraussetzt oder auf eine fremde Dienstleistung zugreift.

Beides ist jedoch in vielen Fällen nur eine Notlösung. HTML stellt für die Erstellung von Formularen Anweisungen bereit, womit sich insbesondere standardisierte Kommunikationswege besser und komfortabler realisieren lassen. Ein Formular hat gegenüber einer konventionellen Email dabei einige wesentliche Vorteile. So können von einem Formular komfortabel gleichartige, datensatzorientierte Informationen erfasst werden, die sich beispielsweise über Scripte und Datenbankprogramme gut auswerten und speichern lassen. Aber auch für den Anwender ergeben sich Vorteile. Bei intelligent gemachten Formularen kann sich die Eingabe oft auf ein paar Mausklicks und wenige Texteingaben reduzieren. HTML stellt Anweisungen zur Generierung von Eingabefeldern, mehrzeiligen Textfeldern, Listen und Aufzählungen, Schaltflächen und beschreibendem Text bereit.

Das große Problem an Formularen unter reinem HTML ist jedoch, dass damit keinerlei Auswertung möglich ist. An dieser Stelle ist man auf Server- seitige Techniken wie Server-seitige Scripte/Programme und/oder CGI angewiesen. Aber auch auf Seiten des Clients kann man bereits einiges machen. Da greift nun JavaScript ein, das über document und dessen Unterobjekt form auf Formulare zugreifen kann. In wieweit man dann Aufgaben bereits beim Client erledigen kann, hängt massiv von der Zielsetzung des Formulars ab. Während Datenbankaktionen eher die Serverseite beanspruchen, kann das Abfangen von fehlerhaften Benutzereingaben bereits oft auf Clientseite realisiert werden.

Die Grundlagen für den Zugriff auf Formulare unter JavaScript und die entsprechenden Objekte haben wir bereits zusammen. Schwerpunkt dessen, was uns noch zu Formularen fehlt, ist der HTML-Aspekt.

HTML-Grundlagen für Formulare

Die rein optische Seite eines Formulars im Rahmen der Webseite (inklusive der Reaktionsmöglichkeiten auf Anwenderaktionen - etwa Selektion oder Deselektion) wird in reinem HTML erstellt. Deshalb müssen wir uns zuerst mit diesen HTML-Grundlagen beschäftigen.

Bei Formularen gibt es einen äußeren

<FORM>

-Container und darin eingeschlossene Container und einzelne Steueranweisungen, welche die einzelnen Formularelemente definieren. Den äußeren Container ergänzen in der Regel zwei bis drei weitere, durch ein Leerzeichen getrennte Angaben. Diese sind im Prinzip optional. In der Webseite wird das Formular ohne Einschränkungen zu sehen sein und auch als reine Benutzeroberfläche einwandfrei funktionieren, wenn innerhalb der <FORM>-Containers korrekte Formular-Elemente notiert werden. Sinnvoll kann das Formular dann aber nur zum optischen Test oder zur Aktivierung von Script-Aufrufen verwendet werden.

Eine in der Regel notwendige Angabe ist gewöhnlich eine Adresse, wo das Formular ausgewertet werden soll, wenn es fertig ausgefüllt und abgeschickt wurde. Wenn die Auswertung nicht lokal erfolgt, ist dies der URL eines Servers und dort das für CGI eingerichtete Verzeichnis samt dort platziertem CGI-Script. Zu dieser Spezifikation dient die Angabe:

action=[URL]

Der URL bei der Angabe action setzt sich wie üblich zusammen aus:

Die gesamte Angabe muss in Anführungszeichen eingeschlossen werden.

Die zweite Standardangabe ist eine Methode, wie das Formular zur Auswertungsstelle gelangt und dort zu behandeln ist. Die Erweiterung

method=[Methode]

legt die Art der Übertragung bzw. Behandlung fest. Dabei wird gewöhnlicherweise einer von den nachfolgenden zwei Werten verwendet.

GET
POST

Beide Angaben machen nur in Kombination Sinn. Es ist sogar so, dass normalerweise zusätzlich - gerade in Verbindung mit Scripten - ein weiteres sehr wichtiges Attribut gesetzt wird - name. Darüber kann man z.B. bei der Kombination von Scripten und Formularen auf das Formular und darüber auf die einzelnen Elemente in dem Formular zugreifen (bei sämtlichen Formularelementen kann das optionale Attribut genauso gesetzt werden). Der schematische Aufbau eines äußeren (fast vollständigen - es gibt noch den Inhaltstyp, die Inhaltstypliste und die Zeichensatzliste - siehe dazu weiterführende HTML-Literatur) Formular-Containers sieht also so aus:

<FORM 
  action="[URL]"
  method=[GET/POST]
  name=[Bezeichner]>
...    [Formular-Elemente]
</FORM>

Ein Gerüst für einen Formular-Container, der das Formular mit der GET- Methode an das CGI-Script meinScript.cgi im Verzeichnis cgi-bin auf dem Webserver www.abc.de schickt, sähe so aus:

<FORM 
action="http://www.abc.de/cgi-bin/meinScript.cgi"
method=GET>
...
</FORM>

Die Verwendung von Formularen ist wie bereits mehrfach angedeutet nicht auf CGI mit Server-Kontakt beschränkt. So kann man aus den Eingabedaten eines Formulars eine beliebige neue HTML-Seite erzeugen, wie wir es an Tag 8 und 14 in einigen Beispielen gemacht haben.

Eine weitere Variante beim Abschicken des Formulars ergibt sich daraus, dass viele Provider keine Server-seitigen Aktionen wie die Ausführung von CGI-Scripten durch Anwender erlauben. Deshalb bleibt für die Auswertung von Benutzereingaben nur die Übermittlung dieser Daten per Email. Darunter ist dann aber nicht die gewöhnliche Email gemeint, die an irgendeiner Stelle in der Webseite per Verweis notiert wird und wo der Anwender im Email-Client sämtliche Angaben außer der Email-Adresse ergänzen muss. Eine Email kann leicht mit einem Formular so gekoppelt werden, dass sie im Wesentlichen aus den Eingabewerten des Anwenders besteht. Dies ist dann identisch zu den anderen Übermittlungssituationen - nur werden die vom Anwender eingegebenen Daten per Email an ein Postfach und nicht an einen Webserver verschickt.

Dies funktioniert so: Der Protokolltyp ist normalerweise bei Verweisen auf WWW-Servern http://. Jeder URL, der ein CGI-Script oder ein Programm auf dem Server starten soll, verwendet dieses Protokoll in der action-Angabe. Wenn ein Formular als Email versendet werden soll, muss in dem <FORM>-Tag nur das Protokoll im action-Attribut auf mailto: geändert bzw. insgesamt ein Mail-URL notiert werden (bitte beachten, dass hinter dem Attribut auf mailto nur ein Doppelpunkt folgt und die beiden Slashes unterbleiben). Das method-Attribut sollte auf POST gesetzt werden. Dies sieht dann schematisch so aus:

<FORM action="mailto:[Email-Adresse]" method=POST>

Das nachfolgende skizzierte Gerüst wäre ein Formular-Container, der das Formular per Email abschickt:

<FORM action="mailto:rjst@gmx.de" method=POST>
...
</FORM>

Ein grundsätzliches Problem stellen bei Formularen, die per mailto ihre Daten wegschicken, diejenigen Browser dar, die nicht korrekt dafür konfiguriert oder erst gar nicht dazu in der Lage sind (die mailto-Variante ist für Formulare irgendwo nur ein Notnagel). Oft kommt es vor, dass beim Abschicken eines solchen Formulars einfach das dem Browser assoziierte Mailprogramm geöffnet wird, ohne die Werte aus dem Formular zu übernehmen oder gar zu versenden. Anwender solcher Plattformen bekommen beim Abschicken eines mailto-Formulars Probleme. Um die gesamte Problematik zu umgehen, kann man einen öffentlichen CGI-Service (etwa CWAK Mailservice - http://mailservice.cwak.com/) verwenden, der - für Privatanwender meist kostenlos - Formulardaten von einem CGI-Programm verarbeiten lässt und dann als E-Mail weiterschickt.

Einige Hintergründe zu Formularen

Nahezu jedes (sinnvolle) Formular besitzt eine Schaltfläche zum Absenden des Formulars. Wenn nun die entsprechende Schaltfläche betätigt wird, findet normalerweise die Übertragung an den Webserver statt. Bevor die Daten an den Server gesendet werden, werden sie zunächst vom Browser zu einer einzigen Zeichenkette kodiert. Die Anwendereingaben werden, durch standardisierte Trennzeichen separiert, einfach hintereinander notiert. Die Art und Weise der Datenübertragung wird durch den Parameter method gesteuert. Dabei wird grundsätzlich zwischen den beiden Methoden GET und POST unterschieden. Der Unterschied zwischen den beiden Methoden besteht hauptsächlich darin, wie der WWW-Server das zurückgeschickte Formular speichert und verarbeitet.

Bei der GET-Methode wird das zurückgeschickte Formular in einer Standard-Umgebungsvariablen gespeichert, welche auf dem Server ein CGI-Programm auswertet. Anschließend verarbeitet das CGI-Programm den Inhalt weiter.

Die Methode POST hingegen veranlasst ein CGI-Programm, das Formular wie eine auf der Kommandozeilenebene erfolgte Benutzereingabe zu behandeln. Es gibt daher kein EndOfFile-Signal (EOF) und die Länge der übermittelten Daten muss vom CGI-Programm aus einer weiteren Standard-Umgebungsvariablen ausgelesen werden.

Wenn die Formularabsendung den Server erreicht, erkennt dieser, dass es sich nicht um eine Webseitenanforderung handelt, sondern ein CGI- Programm zur Auswertung eines Formular gestartet werden soll. Sobald dies geschehen ist und das Programm die gewünschten Aktionen durchgeführt hat, wird die Antwort an den Browser zurückgesendet.

Die im <FORM>-Container enthaltenen Elemente

Ein Formular kann folgende Elemente enthalten:

Für die Eingabe von freien Texten gibt es bei Formularen sowohl einzeilige als auch mehrzeilige Eingabefelder. Diese stellen die unter fast jeder grafischen Oberfläche üblichen Funktionalitäten bereit:

Die Beschriftung der Eingabefelder erfolgt bei Feldern zur Eingabe von allgemeinem Text einfach durch die den Eingabefeldern vorangestellten Texte (reiner HTML-Klartext mit allen Formatierungsmöglichkeiten). Bei Buttons ist es etwas anders - das sehen wir gleich.

Einzeilige Eingabefelder, Schaltflächen, Radiobuttons und Checkbuttons

Einzeilige Eingabefelder werden über den <INPUT>-Tag realisiert. Dieser hat u.a. folgende Attribute:

Die Syntax für eine vollständige Anweisung eines einzeiligen Eingabefelds sieht so aus:

<INPUT 
  name="[Feldname]"
  size=[Wert]
  maxlength=[Wert]
  type=[Typ]
  value=[Wert]>

Die Angabe der maximal anzeigbaren Zeichen und der maximal einzugebenden Zeichen ist optional. Wenn diese Angaben nicht gemacht werden, bekommt das Eingabefeld eine voreingestellte Größe (in der Regel 20 Zeichen) zugewiesen und es kann eine beliebige Anzahl von Zeichen eingegeben werden (bis auf Plattformbeschränkungen). Wenn die Anzahl der eingegebenen Zeichen die maximal anzeigbaren Zeichen überschreitet, wird automatisch seitwärts gescrollt (die Größe eines Eingabefeldes verändert sich nach dem Laden nicht mehr). Fehlt die Typ-Angabe, wird ein einfaches Eingabefeld generiert. Es gibt aber verschiedene Typen von einzeiligen Eingabefeldern. Das optionale Attribut type kann den genauen Typ des Eingabefelds festlegen. Das Attribut kann folgende Ausprägungen annehmen:

Wert

Beschreibung

button

Eine Schaltfläche ohne besondere Funktion. Meist nur sinnvoll in Kombination mit einem Scriptaufruf und der Belegung der Beschriftung über value.

checkbox

Die Typangabe spezifiziert einen Checkbutton. Checkbuttons sind Kontrollfelder, die einzeln und in einer Gruppe auftreten und im Fall einer Gruppe unabhängig von einander selektiert werden können.

date

Nur die Eingabe eines Kalenderdatums ist erlaubt.

file

Ein Spezialfall der Befehlsschaltflächen ist die Typausprägung file. Damit kann ein Standard-Dateiauswahlfenster des Betriebssystems geöffnet werden, welches die dort durch den Anwender ausgewählte Datei in das dort ebenfalls spezifizierte Eingabefeld übernimmt. Dies kann beispielsweise für die Angabe der Datei angewendet werden, die per Upload zu einem Server übertragen werden soll.

float

Nur die Eingabe von Dezimalkommazahlen ist erlaubt.

int

Nur die Eingabe von Ganzzahlen ist erlaubt.

password

Die Feldeingaben erfolgen verdeckt. Bei der Dateneingabe erscheinen dann nur Sternchen im Eingabefeld.

radio

Die Typangabe spezifiziert einen Radiobutton. Radiobuttons sind Optionsfelder, die eine Gruppe bilden und von denen immer genau eins selektiert ist1.

reset

Eine Schaltfläche zum Leeren der Formulareingaben. Meist nur sinnvoll in Kombination mit der Belegung der Beschriftung über value.

submit

Eine Schaltfläche zum Abschicken des Formulars. Meist nur sinnvoll in Kombination mit der Beschriftung über value.

url

Nur die Eingabe eines URL.

Tabelle 20.1: Werte von type

Schauen wir uns ein paar Muster an.1

Ein einzeiliges Eingabefeld mit zehn sichtbaren Zeichen und maximal 15 erlaubten Eingabezeichen würde so aussehen:

Bitte geben Sie Ihren Namen ein: 
<INPUT name="Name" size=10 maxlength=15>

Ein einzeiliges Eingabefeld mit theoretisch 30 sichtbaren Zeichen, aber nur maximal zehn erlaubten Eingabezeichen:

Bitte geben Sie Ihren Nachnamen ein: 
<INPUT name="Nachname" size=30 maxlength=10>

Ein einzeiliges Eingabefeld ohne Angaben für die theoretisch sichtbaren und die maximal erlaubten Eingabezeichen oder sonst eine Spezifikation. Die Größe wird nach Defaultwerten gesetzt:

Bitte geben Sie was ein: <INPUT>

Abbildung 20.1:  Ein einzeiliges Eingabefeld

Eine Befehlsschaltfläche in Verbindung mit einem Event-Handler und dem Aufruf einer JavaScript-Funktion.

<INPUT type=button value ="Ende" 
onClick='JavaScript:alert("Hallo")'>

Eine Befehlsschaltfläche zur Bereitstellung eines Eingabefeldes, welches über das Standard-Dateiauswahlfenster des Betriebssystems gefüllt werden kann:

<INPUT type=file size=60 name=uploadDatei>

Eine Befehlsschaltfläche zum Abschicken eines Formulars:

<INPUT type="submit" name="Ok" value="OK">

Eine Befehlsschaltfläche zum Zurücksetzen eines Formulars:

<INPUT type="reset" name="leer" value="Abbruch">

Abbildung 20.2:  Verschiedene Buttons

Ein einzeiliges Passwort-Eingabefeld mit gleichen Angaben für die theoretisch sichtbaren und die maximal erlaubten Eingabezeichen:

Das Passwort: 
<INPUT name="PW" size=8 maxlength=8 type=password>

Abbildung 20.3:  Einzeiliges Passwortfeld

Die meisten Browser ignorieren bedauerlicherweise - bis auf die Ausprägung password - Typ-Angaben für den Fall von Text-Eingabefeldern (die Buttontypen werden allgemein unterstützt). Hier bietet JavaScript die ideale Ergänzung von HTML. Das gilt auch für die so gut wie nie beachteten optionalen Attribute

min=[nummerischer Wert]

und

max=[nummerischer Wert]

mit denen man eine untere und/oder obere Grenze für erlaubte Werte bei nummerischen Eingaben festlegen kann.

Radiobuttons und Checkbuttons unter HTML sind wie üblich ausgeprägt. Da Optionsfelder ausschließlich in Gruppenform Sinn machen (mindesten zwei müssen zusammengehören, damit eine Option an- und ausgeschaltet werden kann), müssen sie einer Gruppe zugeordnet werden. Dabei gehen Optionsfelder (und Kontrollkästchen) einen anderen Weg als die meisten HTML-Strukturen, die einer Oberstruktur zugeordnet werden müssen. Meist werden diese dann von einem HTML-Container umschlossen (etwa Tabelleneinträge). Hier erfolgt die Zuordnung über das Attribut

value="[Bezeichner]"

mit einem internen Namen, der ein Element einer Gruppe zuordnet (das bedeutet, alle zu einer Gruppe gehörenden Radiobuttons müssen den gleichen Wert zugewiesen bekommen). Es gibt explizit keinen umschließenden Container. Wenn abwechselnd Optionsfelder anklickt werden, werden immer alle anderen zu der Gruppe gehörigen Optionsfelder deselektiert.

Abschließend muss ein Optionsfeld noch beschriftet werden (hier sind auch deutsche Umlaute erlaubt), damit der Anwender sieht, was er auswählt. Die Beschriftung eines Optionsfeldes ist in keiner Weise an die internen Namen oder die Feldnamen gekoppelt und besteht aus gewöhnlichem HTML-Text. Damit sieht die Syntax so aus (wenn die Beschriftung nachgestellt wird):

<INPUT 
  type=radio
  name="[Bezeichner]"
  value="[Bezeichner]"> [Beschriftung]

Beachten Sie, dass die grundsätzlich einzelnen Einträge nicht automatisch durch Zeilenumbrüche getrennt werden. Diese müssen bei Bedarf extra notiert werden. Dies gilt auch für Auswahllisten.

Eine Gruppe von vier zusammengehörigen Optionsfeldern:

Weihnachtswunsch: 
<INPUT type=radio name="eins"
value="Geschenk">Teddy
<INPUT type=radio name="zwei"
value="Geschenk">Lutscher
<INPUT type=radio name="drei"
value="Geschenk">Malstifte
<INPUT type=radio name="vier"
value="Geschenk">PC

Kontrollkästchen bestehen aus einem einzelnen Feld oder einer Gruppe von beschrifteten Schaltflächen, von denen ein Anwender unabhängig von anderen Schaltflächen (auch innerhalb einer Gruppe) eine oder mehrere Schaltflächen selektieren kann. Der einzige Syntaxunterschied zu Optionsfeldern ist, dass beim type-Attribut der Wert checkbox angegeben wird. Damit sieht die Syntax so aus:

<INPUT 
  type=checkbox
  name="[Bezeichner]"
  value="[Bezeichner]"> [Beschriftung]


Eine Gruppe von Kontrollfeldern:

Weihnachtswunsch: 
<INPUT type=checkbox name="eins"
value="Geschenk">Teddy
<INPUT type=checkbox name="zwei"
value="Geschenk">Lutscher
<INPUT type=checkbox name="drei"
value="Geschenk">Malstifte
<INPUT type=checkbox name="vier"
value="Geschenk">PC

Abbildung 20.4:  Kontrollkästchen

Sowohl Kontrollkästchen als auch Optionsfelder können über das optionale Attribut checked (ohne Wertzuweisung) für den <INPUT>-Tag vorselektiert werden. Es ist in der Regel sogar so, dass beim Laden einer Webseite mit einem Formular keines der Options- oder Kontrollfelder selektiert sein wird. Es kann die Situation auftreten, dass ohne den Einsatz dieses Attributs sogar in einer Gruppe von Optionsfeldern anfänglich keines davon selektiert ist (ein normalerweise nicht erlaubter Zustand).

Eine Gruppe von drei zusammengehörigen Optionsfeldern, wobei das zweite Optionsfeld vorselektiert ist:

Bevorzugte Eissorte: 
<INPUT type=radio name="a"
value="Eis">Erdbeere
<INPUT type=radio name="b"
value="Eis" checked>Zitrone
<INPUT type=radio name="c"
value="Eis">Kirsch

Abbildung 20.5:  Radiobutton mit Zeilenumbrüchen zwischen den Einträgen

Bei allgemeinen Befehlsschaltflächen bedeutet das Attribut value die Beschriftung des Buttons (in Anführungszeichen zu setzten). Dies unterscheidet Button in der Syntax von Optionsfeldern und Kontrollkästchen und ist dementsprechend nicht ganz ungefährlich.

Mehrzeilige Eingabefelder

Mehrzeilige Eingabefelder werden mit dem <TEXTAREA>-Container realisiert. Dieser hat folgende Attribute:

Ein Beispiel für ein Eingabefeld mit 80 Zeichen Breite und sechs Zeilen:

Kommentar: 
<TEXTAREA name="Kommentar" cols=80 rows=6></TEXTAREA>

Ein Beispiel für ein Eingabefeld mit Defaultgröße:

Kommentar: <TEXTAREA></TEXTAREA>

Abbildung 20.6:  Ein mehrzeiliges Textfeld

Die Größenangaben bei einem mehrzeiligen Listenfeld beschränken nur die sichtbaren Zeichen, nicht die Anzahl der Zeichen, welche eingegeben werden dürfen. Sowohl in Hinsicht auf Zeilen als auch in einer Zeile eingebbaren Zeichen beschränkt nur die Plattform (und natürlich der sinnvolle Umgang mit dem Eingabefeld) die Anzahl. Die Angabe der Zeilen und Spalten ist optional. Wenn diese Angaben nicht gemacht werden, bekommt das Eingabefeld eine voreingestellte Größe zugewiesen. Wenn die Anzahl der eingegebenen Zeichen die maximal anzeigbaren Zeichen überschreitet, wird entweder automatisch seitwärts oder horizontal gescrollt. Mehrzeilige Listenfelder werden von den meisten Browsern mit Bildlaufleisten angezeigt, die bei Überschreitung des Anzeigebereichs durch die Menge des Textes automatisch aktiviert, andernfalls deaktiviert werden. Einen automatischen Zeilenumbruch am Ende des sichtbaren Bereichs einer Zeile vollziehen nur wenige Browser. Dies muss in der Regel per Zeilenschaltung manuell durch den Anwender erfolgen.

Innerhalb des <TEXTAREA>-Containers kann ein Text als Vorbelegung definiert werden.

Ein Beispiel für ein vorbelegtes Eingabefeld mit 80 Zeichen Breite und zwei Zeilen:

Kommentar: 
<TEXTAREA name="Kommentar" cols=80 rows=2>
Das ist vorbelegt!
</TEXTAREA>

Auswahllisten

Auswahllisten in Formularen stellen die bekannten Selektionsmöglichkeiten für Anwender zur Verfügung. Eine Auswahlliste besteht aus einem äußeren <SELECT>-Container für die Listenstruktur und jeweils einem inneren Container für jeden Listeneintrag.

Der <SELECT>-Tag besitzt das optionale Attribut name="[Bezeichner]", über das die Liste wie üblich einen formularweit eindeutigen Namen nach den üblichen Regeln bekommt, und size=[nummerischer Wert] (damit wird die Anzahl der anzuzeigenden Einträge der Liste festgelegt). Falls die Liste mehr Einträge enthält, als angezeigt werden sollen/können, stellen die meisten Browser die Liste scrollbar dar. Wenn die Angabe fehlt, wird ein einzeiliges Listenfeld angezeigt, das wie gewohnt beim Anklicken die vollständige Liste darstellt. Die Breite des Listenfelds ergibt sich automatisch aus der Länge der jeweiligen Listenpunkte. Die Syntax des <SELECT>-Containers sieht also so aus:

<SELECT 
  name="[Listenname]"
  size=[nummerischer Wert]>
    ...[Listeneinträge]
</SELECT>

Ein Listeneintrag wird über einen <OPTION>-Container definiert. Syntax:

<OPTION>
...[Listeneintrag]
</OPTION>

Eine beispielhafte Auswahlliste ohne Angabe der Größe der Liste sieht so aus (ein einzeiliges Listenfeld mit mehreren Einträgen):

Bitte geben Sie das Geschlecht an: 
<SELECT name="Geschl">
<OPTION>
Mann
</OPTION>
<OPTION>
Frau
</OPTION>
</SELECT>

Die folgende Auswahlliste gibt die Größe der Liste an (die Anzahl der Einträge ist kleiner als die maximal anzeigbaren Einträge):

Bitte wählen Sie das Land: 
<SELECT name="Land" size=5>
<OPTION>
Deutschland
</OPTION>
<OPTION>
Schweiz
</OPTION>
<OPTION>
Österreich
</OPTION>
</SELECT>

Die folgende Auswahlliste gibt die Größe der Liste an, wobei die Anzahl der Einträge größer als die maximal anzeigbaren Einträge ist:

Bitte wählen Sie das Land: 
<SELECT name="Land" size=2>
<OPTION>
Deutschland
</OPTION>
<OPTION>
Schweiz
</OPTION>
<OPTION>
Österreich
</OPTION>
</SELECT>

Abbildung 20.7:  Verschiedene mehrzeilige Listenfelder

Abbildung 20.8:  Ein einzeiliges Listenfeld

Mehrfachauswahl in einer Liste ist möglich, aber nicht selbstverständlich. Dies hängt an den Einstellungen des Browsers, ob es standardmässig erlaubt oder verboten ist. Eine explizite Erlaubnis von Mehrfachauswahl erfolgt mit dem Attribut multiple im <SELECT>-Tag (ohne Wertzuweisung).

Eine Auswahlliste mit explizit erlaubter Mehrfachauswahl:

Haustiere:

<SELECT name="Tiere" size=3 multiple>
<OPTION>
Hund
</OPTION>
<OPTION>
Katze
</OPTION>
<OPTION>
Maus
</OPTION>
</SELECT>

Eine Vorselektion eines Listeneintrags ist mit dem Attribut selected (ohne Wertzuweisung) möglich.

Eine Auswahlliste mit expliziter Vorselektion eines Listeneintrags:

Familienstand: 
<SELECT NAME="Famstand" SIZE=2>
<OPTION>
Verheiratet
</OPTION>
<OPTION selected>
Glücklich
</OPTION>
</SELECT>

Ein Listeneintrag kann im Prinzip über einen <OPTION>-Container als auch über einen einzelnen <OPTION>-Tag formuliert werden. Für eine strenge SGML-Konformität und um eventuell dennoch mögliche Fehler bei Browsern auszuschließen, ist am Ende des Listeneintrags ein abschließendes Tag </OPTION> trotz Mehraufwand sinnvoll.

Erstellen wir nun ein vollständiges Formular, das die möglichen Elemente enthält. Wir verzichten nur auf die Attribute im <FORM>-Tag, aber die sind für die optische Gestaltung hier nicht von Belang.

Beispiel 1:

Erstellen Sie die Datei Form1.htm:

<HTML>
<BODY>
<FORM>
Vorname:
<INPUT name="VName" size=10 maxlength=15>
Nachname:
<INPUT name="Nachname" size=30 maxlength=10>
<BR>
Namenzusatz: <INPUT>
<BR>
Passwort:
<INPUT name="PW" size=8 maxlength=8 type=password>
<BR>
Weihnachtswunsch:
<INPUT type=checkbox name="eins"
value="Geschenk">Teddy
<INPUT type=checkbox name="zwei"
value="Geschenk">Lutscher
<INPUT type=checkbox name="drei"
value="Geschenk">Malstifte
<INPUT type=checkbox name="vier"
value="Geschenk">PC
<BR>
Bevorzugte Eissorte:
<INPUT type=radio name="a"
value="Eis">Erdbeere
<INPUT type=radio name="b"
value="Eis" checked>Zitrone
<INPUT type=radio name="c"
value="Eis">Kirsch
<BR>
Kommentar:
<TEXTAREA name="Kommentar" cols=80 rows=6>
Super gut
</TEXTAREA>
<BR>
Geschlecht:
<SELECT name="Geschl">
<OPTION>Mann
</OPTION>
<OPTION>Frau
</OPTION>
</SELECT>
Familienstand:
<SELECT NAME="Famstand" SIZE=2>
<OPTION>Verheiratet
</OPTION>
<OPTION selected>Glücklich
</OPTION>
</SELECT>
<P>
Wohnsitz:
<SELECT name="Land" size=3>
<OPTION>Deutschland
</OPTION>
<OPTION>Schweiz
</OPTION>
<OPTION>Österreich
</OPTION>
<OPTION>Lichtenstein
</OPTION>
</SELECT>
Urlaubsziel:
<SELECT name="Land" size=3>
<OPTION>Deutschland
</OPTION>
<OPTION>Schweiz
</OPTION>
<OPTION>Österreich
</OPTION>
<OPTION>Schweden
</OPTION>
<OPTION>Norwegen
</OPTION>
</SELECT>
<P>
<INPUT type=file size=60 name=uploadDatei>
<BR>
<INPUT type=button value ="Ende"
onClick='JavaScript:alert("Nö - keine Chance")'>
<INPUT type="submit" name="Ok" value="OK">
<INPUT type="reset" name="leer" value="Abbruch">
</FORM>
</BODY>
</HTML>

Abbildung 20.9:  Das Formular mit gerade aufgerufener Upload-Funktion

Abbildung 20.10:  Das vollständige Formular mit gerade aufgerufener JavaScript-Funktion


Der JavaScript-Zugriff auf Formulare

In den vergangenen Kapiteln des Buches haben wir bereits mehrfach auf Formulare in Verbindung mit JavaScript zurückgegriffen. Fassen wir hier nur noch mal zusammen, was wir dazu schon parat haben, und ergänzen es mit einigen wichtigen Erweiterungen.

Grundsätzlich werden Formulare in Webseiten durch das Objekt form repräsentiert, das in der Objekthierarchie unter document angeordnet ist. Wenn eine Webseite mit Formularen geladen wird, wird für jedes Formular so ein form-Objekt erzeugt und in einem Objektfeld mit Namen forms[] gespeichert. Die Indexnummern entstehen automatisch, wenn der Browser das Objekt bei Abarbeitung der HTML-Seite erzeugt und in ein Element des Arrays einordnet. Das erste im Dokument auftretende Formular erhält den Index 0, das zweite den Index 1 und so fort.

Das form-Objekt hat weder viele Eigenschaften noch Methoden. Die Bedeutung erhält es darüber, dass man darüber jedes Formularelement in der Webseite auswerten und in der Regel auch setzen kann. Das wird hauptsächlich über eines seiner Unterobjekte erfolgen.

Eigenschaften

Eigenschaft

Beschreibung

action

Das action-Attribut im <FORM>-Tag.

elements

Ein Array, das alle Elemente als vollständige Repräsentation der HTML-Implementierung in dem Formular enthält.

encoding

Das enctype-Attribut. Das ist der Kodierungstyp des Formulars. Mehr Informationen dazu finden Sie im WWW in der Spezifikation RFC 1867.

length

Die Anzahl der Elemente im Formular.

method

Das method-Attribut im <FORM>-Tag.

name

Das name-Attribut im <FORM>-Tag.

target

Das target-Attribut im <FORM>-Tag. Das ist die Angabe des Wertes, der bei der Definition des Formulars in der Zusatzangabe target steht (bei CGI-Formularen).

Tabelle 20.2: Eigenschaften von form

Methoden

Methode

Beschreibung

reset()

Simuliert einen Mausklick auf einen Resetbutton.

submit()

Schickt das Formular ab.

Tabelle 20.3: Methoden von form

Daneben steht noch die übliche handleEvent()-Methode bereit.

Konkrete Anwendung von JavaScript auf Formulare

Die Anwendung von JavaScript auf Formulare erfolgt im Wesentlichen über die wohl wichtigste Eigenschaft von forms - das Objektfeld elements. Darüber hat man Zugriff auf alle einzelnen Elemente innerhalb von Formularen, welche in der HTML-Datei definiert sind. Das Objektfeld wird automatisch erzeugt, wenn der Browser mindestens ein Formular in der HTML-Datei mit Elementen vorfindet. Dabei wird für jedes Element in jedem Formular automatisch eine Instanz eines dem Element entsprechenden Objekts erzeugt.

Da das Objektfeld elements eine Eigenschaft von dem Objektfeld forms ist, gibt es verschiedene Möglichkeiten, um einzelne Formularelemente anzusprechen. Entweder über die Form-Instanz selbst und einen Index oder den Formularnamen und ein elements-Eintrag mit Index oder den Elementnamen (beliebig kombinierbar). Schematisch sehen die Zugriffe so aus:

document.forms[index1].elements[index2].[Eigenschaft] 
document.forms[index1].[Elementname].[Eigenschaft]
document.[Formularname].elements[index].[Eigenschaft]
document.[Formularname].[Elementname].[Eigenschaft]
document.forms[index1].elements[index2].[Methode()]
document.forms[index1].[Elementname].[Methode()]
document.[Formularname].elements[index].[Methode()]
document.[Formularname].[Elementname].[Methode()]

Einige Eigenschaften des Objektsfeldes sind bereits verfügbar, wenn der Browser wenigstens ein Formular mit wenigstens einem Element in der HTML-Datei vorfindet. Andere Eigenschaften sind jedoch nur für bestimmte Formularelemente verfügbar (d.h. wenn ein Element des zugeordneten Typs überhaupt vorhanden ist und wenn diese Eigenschaft überhaupt Sinn macht2). Nachfolgend sind die Eigenschaften von elements angegeben:

Eigenschaft

Beschreibung

checked

Diese Eigenschaft steht zur Verfügung, wenn das Element ein Radio- oder Checkbutton ist. Sie fragt ab oder bestimmt, ob ein Radio- oder Checkbutton aktiviert ist oder nicht. Mögliche Werte sind true bzw. 1 oder false bzw. 0.

defaultChecked

Diese Eigenschaft steht zur Verfügung, wenn das Element ein Radio- oder Checkbutton ist. Sie fragt ab oder bestimmt, ob ein Radio- oder Checkbutton per Voreinstellung aktiviert ist oder nicht. Mögliche Werte sind true bzw. 1 oder false bzw. 0.

defaultValue

Diese Eigenschaft steht zur Verfügung, wenn das Element ein Eingabefeld ist. Sie beinhaltet den voreingestellten Text eines Eingabefeldes.

form

In der Eigenschaft form wird das zugehörige Formular als Objekt referenziert. Darüber besteht Zugriff auf alle Eigenschaften und Methoden des Form-Objekts aus einem Element eines Formulars heraus.

name

Der Name des Formularelements, wie er in HTML bei der Definition des Elements mit der Zusatzangabe name zugewiesen wurde.

type

Die Variable hat die Information über den Elementtyp eines Formularelements gespeichert. Sie kann in Zusammenhang mit allen Formularfeldern angewendet werden

value

Die wahrscheinlich wichtigste Eigenschaft. Dies ist der Wert, den der Anwender in einem Formularelement eingegeben bzw. diesem zugewiesen hat.

Tabelle 20.4: Eigenschaften von elements

Über das Objektfeld options, das in der Objekthierarchie unter elements angeordnet und damit eine weitere Eigenschaft davon ist, hat man vollständigen Zugriff auf Auswahllisten innerhalb eines Formulars. Auswahllisten können wie jedes andere Formularelement mit einer Indexnummer oder dem Namen angesprochen werden. Da es sich selbst um ein Objekt handelt, stellt es auch eigene Eigenschaften bereit, die nur zur Verfügung stehen, wenn das Element eine Auswahlliste ist:

Eigenschaft

Beschreibung

length

Ermittelt wird die Anzahl der Auswahlmöglichkeiten.

options[n].
defaultSelected

Wird zum Abfragen oder Bestimmen einer Default-Einstellung in einer Auswahlliste genutzt, d.h. ob sie per Voreinstellung aktiviert ist oder nicht. Mögliche Werte sind true bzw. 1 oder false bzw. 0.

selectedIndex

Ermittelt oder bestimmt, welche Auswahlmöglichkeit in einer Auswahlliste aktiviert ist. Mögliche Werte sind true bzw. 1 oder false bzw. 0.

options[n].
selected

Die Eigenschaft kann dazu verwendet werden, zu ermitteln oder zu bestimmen, welche Auswahlmöglichkeit in einer Auswahlliste aktiviert ist. Mögliche Werte sind true bzw. 1 oder false bzw. 0.

options[n].
value

Beinhaltet den internen Wert des über den Index angegebenen Eintrags in einer Auswahlliste.

options[n].text

Der Text einer Auswahlmöglichkeit in einer Auswahlliste wird abgefragt oder bestimmt.

Tabelle 20.5: Eigenschaften von options

Das Objektfeld elements stellt neben seinen Eigenschaften samt Unterobjekten die folgenden Methoden bereit:

Methoden

Beschreibung

blur()

Der Focus verlässt ein Element und es wird damit deselektiert.

click()

Die Methode bewirkt das Gleiche, als wenn der Anwender auf ein
Element klickt.

focus()

Der Focus wird auf ein Element positioniert.

handleEvent()

Die Methode übergibt ein Ereignis an ein Element, das auf das Ereignis reagieren kann (nur Netscape).

select()

Die Methode selektiert den gesamten in einem Feld enthaltenen Text.

Tabelle 20.6: Methoden von elements

Reaktionen auf das Abschicken und Zurücksetzen eines Formulars

Bei der Behandlung der beiden Event-Handler onReset und onSubmit haben wir bereits gesehen, dass diese für die Versendung eines Formulars und das Leeren genutzt werden können, um JavaScripte bei der Betätigung aufzurufen.

Die Reaktion auf das Zurücksetzen eines Formulars über einen Event- Handler (onReset) erlaubt die Erweiterung der Funktionalität, welche über die durch HTML generierte Abbrechen-Schaltfläche standardmäßig erfolgt. Statt direkt beim Anklicken dieses Buttons alle Eingaben im Formular sofort zu löschen, kann man statt dessen, wenn im einleitenden Formular-Tag (!) der Event-Handler onReset notiert ist, die dort stehende JavaScript-Anweisung ausgeführen.

Beispiel:

<FORM Name="meinFormular" onReset="return wirklich()">

Von entscheidendem Anteil an der Unterdrückung des Leerungsvorgangs ist der Rückgabewert, welchen die aufgerufene Methode zurückgibt. Wenn beim Funktionsaufruf über onSubmit und onReset das Schlüsselwort return vorangestellt ist und man im Rahmen der aufgerufenen Funktion die Werte true oder false zurückgibt, kann man die Abarbeitung der ausgelösten Aktion noch einmal abbrechen (Rückgabe von false durch die aufgerufene Funktion). Wenn darauf verzichtet wird, wird zwar die aufgerufene Funktion ausgeführt, die eigentliche Aktion (also das Leeren oder Abschicken des Formulars) aber anschließend durchgeführt.

Vollkommen analog ist der Event-Handler onSubmit zu sehen. Er erweitert nur statt der Abbrechen-Schaltfläche den Submit-Button, mit dem ein Formular weggeschickt wird. Statt es einfach abzusenden, kann eine JavaScript-Funktion aufgerufen werden, die beispielsweise überprüft, ob alle Felder eines Formulars ausgefüllt sind.

Es wird Zeit für noch ein Beispiel. Testen wir die Kontrolle, ob ein Formular wirklich abgeschickt oder geleert werden soll. Dabei verändern wir das Beispiel von neulich ein wenig. Insbesondere soll per JavaScript geprüft werden, ob alle Felder im Formular gefüllt sind. Beachten Sie, dass wir über den Namen des Formulars und die beiden Eingabefelder arbeiten.

Beispiel 2:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function kontrolle()
{
if((document.meinForm.eins.value=="")
||(document.meinForm.zwei.value==""))
{
alert("Das Formular muss vollständig gefüllt werden");
return false;
}
else
{
return true;
}
}
function sicher()
{
return window.confirm(
"Wollen Sie dieses Formular wirklich leeren?");
}
</SCRIPT>
<BODY>
<FORM
  name="meinForm"
  action="mailto:hotdampf@hotmail.com"
  method=POST
  onSubmit="return kontrolle()"
  onReset="return sicher()">
<INPUT name="eins">
<INPUT name="zwei">
<BR>
<INPUT type="submit" value="Ok">
<INPUT type="reset" value="Abbrechen">
</FORM>
</BODY>
</HTML>

Speichern Sie das Script unter Form2.htm und laden Sie es in einen Browser. Lassen Sie die beiden Formularfelder oder eines davon leer und betätigen Sie die Ok- und die Abbrechen-Schaltfläche. Testen Sie dann in dem Dialogfenster jeweils beide Möglichkeiten.

Abbildung 20.11:  Rückfrage, ob das Formular vollständig ist

Zusammenfassung

Formulare sind eine der wichtigsten Möglichkeiten der Interaktion zwischen dem Betrachter einer Webseite und dem Ersteller der Seite. Mit einem Formular können komfortabel gleichartige, datensatzorientierte Informationen erfasst werden, die sich über Scripte und Datenbankprogramme gut auswerten und speichern lassen. Ein Formular wird erst mal in purem HTML erstellt. Dazu stellt HTML Anweisungen zur Generierung von Eingabefeldern, mehrzeiligen Textfeldern, Listen und Aufzählungen, Schaltflächen und beschreibendem Text bereit. Bei Formularen gibt es immer einen äußeren <FORM>-Container und darin eingeschlossene Container und einzelne Steueranweisungen, welche die einzelnen Formularelemente definieren. Den äußeren Container ergänzen in der Regel zwei bis drei weitere, durch ein Leerzeichen getrennte Angaben. Die eine in der Regel notwendige Angabe ist gewöhnlich eine Adresse, wo das Formular ausgewertet werden soll, wenn es fertig ausgefüllt und abgeschickt wurde. Die zweite Standardangabe ist eine Methode, wie das Formular zur Auswertungsstelle gelangt und dort zu behandeln ist. Beide Angaben machen nur in Kombination Sinn.

Um über JavaScript auf Formulare zugreifen zu können, nutzt man das Objekt form, das in der Objekthierarchie unter document angeordnet ist. Wenn eine Webseite mit Formularen geladen wird, wird für jedes Formular solch ein form-Objekt erzeugt und in einem Objektfeld mit Namen forms[] gespeichert. Die Indexnummern entstehen automatisch, wenn der Browser das Objekt bei Abarbeitung der HTML-Seite erzeugt und in einem Element des Arrays einordnet.

Das form-Objekt hat weder viele Eigenschaften noch Methoden. Die Bedeutung erhält es dadurch, dass man darüber jedes Formularelement in der Webseite auswerten und in der Regel auch setzen kann. Das wird hauptsächlich über eines seiner Unterobjekte erfolgen - elements.

Fragen und Antworten

Frage:
Ist der Zugriff über Formularnamen und Elementnamen sinnvoller oder der Zugriff über die Objektfelder und Indizes?

Antwort:
Beides hat Vor- und Nachteile. Wenn Sie Namen verwenden, können Sie leichter neue Elemente in ein Formular einfügen, entfernen usw. Das Gleiche gilt für ganze Formulare in Webseiten. Außerdem sind Namen immer sprechender. Arrays sind immer dann besser, wenn man mit Schleifen oder sonstigen automatisierten Abläufen arbeiten möchte.

Frage:
Was ist mit dem <BUTTON>-Tag? Gehört der zur Formulartechnik?

Antwort:
Nein. Das ist ein Tag, der nicht dazu gehört. Er sieht zwar genauso aus wie eine Formular-Schaltfläche, wird aber ohne umgebenden Formular-Container notiert. Er wird auch nicht in jedem Browser unterstützt.

Workshop

Verbinden Sie die Formulare in dem Kapitel mit der Tabellentechnik, um das Layout sinnvoller zu gestalten.

Suchen Sie in den bisherigen Kapiteln die Beispiele, wo wir mit Formularen gearbeitet haben. Analysieren Sie diese aus dem Blickwinkel der hier neu hinzugekommenen Erkenntnisse.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Was ist <FORM>?
  2. Was ist <OPTION>?
  3. Was ist multiple?
  4. Ist das richtig?
    <SELECT name="Tiere" size=1>
    <OPTION>
    Hund
    </OPTION>
    <OPTION>
    Katze
    </OPTION>
    <OPTION>
    Maus
    </OPTION>
    </SELECT>
  5. Mit welcher HTML-Anweisung wird ein mehrzeiliges Eingabefeld realisiert?
  6. Wie unterscheiden sich Radiobuttons von Checkbuttons ?
  7. Was ist options?



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


12

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH