Zurück ] Inhalt ] Weiter ]

Formulare Erstellen

Formulare stellen dem Benutzer der Seite eine Reihe Eingabemöglichkeiten zur Verfügung. Hat der Benutzer die Inhalte eingetragen, kann der Benutzer eine Schaltfläche anklicken und den Inhalt an den Web-Server senden oder per E-Mail verschicken. Häufig werden Formulare bei Suchdiensten eingesetzt, wo der Benutzer in einem Eingabefeld Suchbegriffe eingeben kann, nach denen in einer Datenbank gesucht werden soll. Außerdem werden Formulare beim Online-Shopping oder als Eingabenmöglichkeit für Feedback an Firmen verwendet.

Das Erstellen von Formularen mit Frontpage stellt keine große Schwierigkeit dar. Mit Hilfe von Assistenten oder Menübefehlen und Dialogen lassen sich HTML-Seiten erstellen, die komplexe Formulare enthalten.

Die Befehle zum Einfügen von Formularelementen befinden sich im Menü Einfügen/Formular. Wenn man dort das erste Formularfeld auswählt und einfügt, wird automatisch auch der Code für das Formular selbst eingefügt. Es werden z.B. zwei Schaltflächen eingefügt - eine zum Abschicken und eine zum Löschen des Formularinhaltes. Frontpage erzeugt auch Standardcode zum Speichern des Formularinhaltes. Dieser Code funktioniert jedoch nur, wenn auf dem Web-Server Frontpage-Servererweiterungen (Frontpage Server Extensions) verfügbar sind. Da das oft nicht der Fall ist, werden zunächst die wichtigsten Formulareigenschaften erklärt. Anschließend werden einige Formularfelder beispielhaft vorgestellt.

Formulareigenschaften festlegen

Im HTML-Code wird ein Formular in die Tags <FORM> und </FORM> eingeschlossen. Dem einleitenden Tag können eine Reihe von Attributen hinzugefügt werden, die in der folgenden Tabelle zusammengefaßt sind.

Eigenschaften für Formulare
Einstellung Beschreibung HTML-Tag
Formularname über den Formularnamen kann man sich auf das Formular beziehen, z.B. in JavaScript-Code name="formularname"
Übertragungsmethode Legt die Art fest, wie Daten übertragen und verarbeitet werden können method="get" oder method="post"
ausgeführte Aktion legt fest, was passiert, wenn der Benutzer auf die Schaltfläche Abschicken klickt action="mailto:
     user@host.com" oder action="script.cgi"
JavaScript-Events Werden bestimmte Aktionen im Formular ausgeführt können automatisch Java-Skripte ausgeführt werden. onSubmit="programm" oder onChange="programm" 

Die Frontpage erzeugten Formulare setzen voraus, daß man Servererweiterungen für Frontpage installiert hat. Da das in vielen Fällen nicht der Fall sein dürfte, muß man als Designer von Formularseiten die oben angegebenen Attribute selbst ändern. Wenn man Frontpage-Servererweiterungen auf dem Webserver installiert hat, kann man die von einem Formularassistenten erzeugten Webseiten in der Regel direkt verwenden.

Es gibt drei Möglichkeiten, Daten aus Formularen zu verarbeiten:

  1. Durch den Aufruf eines CGI-Scripts auf dem Webserver wird dort ein Programm gestartet, das die Bearbeitung des Formularinhaltes übernimmt. Das Programm kann in jeder Programmiersprache programmiert sein. Allerdings werden meist Programme verwendet, die in der Sprache Perl geschrieben wurden.
    1. Wenn als Methode Get verwendet wird, werden die Daten des ausgefüllten Formulars auf WWW-Servern mit installiertem HTTP-Protokoll in der CGI-Umgebungsvariablen QUERY_STRING gespeichert. Das CGI-Programm muß den Inhalt dieser Umgebungsvariablen auslesen und verarbeiten.
    2. Wenn die Methode Post benutzt wird, werden die Daten des ausgefüllten Formulars auf dem Server-Rechner von "stdin" zur Verfügung gestellt, und das CGI-Programm muß sie behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde.
  2. Man kann den Inhalt des Formulars per E-Mail versenden. In diesem Fall muß die Methode auf "Post" (method=post) gesetzt werden. Als Aktion wird die E-Mail-Adresse als URL angegeben (z.B. action="mailto:user@host.com"). Browser, die kein E-Mail-Protokoll verarbeiten können, werden mit diesem Formular nicht funktionieren.
  3. Seit einiger Zeit besteht die Möglichkeit, Servlets zu verwenden. Servlets sind spezielle Java-Programme, die wie CGI-Programme auf dem WWW-Server ausgeführt werden und die Formularbearbeitung vornehmen. Servlets sind sicherer und benötigen wenig Ressourcen auf dem Server. Allerdings benötigt man für Servlets auch Erweiterungen im WWW-Server.

Java-Skripte können benutzt werden, um Formulareingaben zu prüfen, ehe sie verschickt werden. Dadurch kann unnötiges Versenden von Daten vermieden werden.

Formularfelder hinzufügen

Wir wollen nun das folgende Formular erstellen, das einige typisch verwendete Elemente enthält.

So bin ich...

mein Geschlecht männlich
weiblich
mein Alter:
ich bin eher
Daten dürfen gespeichert werden
weitere Bemerkung

  1. Um einen Formularbereich zu bekommen, wählen wir den Menüpunkt Einfügen/Formular/Einzeiliges Textfeld. Wir haben nun einen gestrichelt umrandeten Formularbereich mit den zwei Schaltflächen Abschicken und Zurücksetzen.
  2. Wir fügen nun die Überschrift und eine Tabelle mit 2 Spalten ein. Die Tabelle soll unsichtbar sein. Wir verschieben das Textfeld in die zweite Spalte der zweiten Zeile und geben "mein Alter" als Beschriftung ein.
  3. Die Zelle in der zweiten Spalte der ersten Zeile teilen wir horizontal in zwei Zeilen. In jede diesen Zellen fügen wir ein Optionsfeld über den Menüpunkt Einfügen/Formular/Optionsfeld ein. Wir geben die Beschriftungen für die Optionsfelder ein.
  4. In der dritten Spalte fügen wir mit Hilfe des Menüpunktes Einfügen/Formular/Dropdownfeld ein Dropdownfeld ein. Außerdem legen wir die Beschriftung ein.
  5. In der fünften Zeile fügen wir die Beschriftung und das Kontrollkästchen hinzu. Zum Einfügen des Kontrollkästchen wählen wir den Menüpunkt Einfügen/Formular/Kontrollkästchen aus.
  6. In der sechsten Zeile geben wir die Überschrift für das Kommentarfeld ein. in der Zeile 7 verbinden wir die zwei Zellen der Zeile zu einer Zelle und fügen über den Menüpunkt Einfügen/Formular/Textfeld mit Bildlauf ein.

Nun haben wir das Aussehen des Formulars festgelegt. Um eine Auswertung des Formulars zu ermöglichen, müssen wir nun die Eigenschaften der einzelnen Felder bearbeiten. Wichtig ist vor allem, daß wir den Felder ausdrucksvolle Namen geben, um die Programmierung und Auswertung anschließend zu erleichtern. Zum Bearbeiten der Formularfeldeigenschaften klicken wir mit der rechten Maustaste jeweils auf das Formularfeld und wählen aus dem Kontextmenü den Eintrag Formularfeldeigenschaften aus.

Feld Einstellung Beschreibung
Optionsfelder Name der Gruppe: Geschlecht In einer Gruppe von Optionsfeldern darf nur ein Feld aktiviert sein. Deshalb werden Optionsfelder zu Gruppen zusammengefaßt
Wert: maennlich bzw. weiblich Die Gruppe der Optionsfelder gibt als wert entweder maennlich oder weiblich zurück, je nach gewählter Option.
Anfangszustand: nicht gewählt Eines der Optionsfelder kann standardmäßig gewählt sein.
einzeiliges Textfeld Name: Alter Name des Textfeldes
Anfangswert: <keiner> Standardwert für dieses Feld
Breite (in Zeichen): 3 Legt die Breite des Textfeldes fest.
Dropdownfeld Name: aufstehen Name des Dropdownfeldes
Höhe: 1 Anzahl der angezeigten Zeilen, Wenn der Wert größer als 1 ist, wird aus dem Dropdownfeld ein Listenfeld.
Mehrfachauswahl zulassen: nein selbsterklärend
Auswahlliste siehe weiter unten Die Elemente, die in dem Dropdownfeld angezeigt werden.
Kontrollkästchen Name: speichern Name des Kontrollkästchens
Wert: ON ON = aktiviert, sonst deaktiviert
Option aktiviert gewählt Standardwert des Kontrollkästchens.
Textfeld mit Bildlauf Name: Kommentar Name des Textfeldes
Anfangswert. <keiner> Standardwert für dieses Feld
Breite (in Zeichen): 50 Anzahl der Zeichen je Zeile
Anzahl Zeilen Anzahl der Zeilen, die sichtbar sind. Der Inhalt kann mehr als 5 Zeilen lang sein.
Im Dropdownfeld kann man eine Auswahl verschiedener Werte angeben, aus denen der Anwender einen (oder mehrere) Werte auswählen kann. Im Dialog für die Formularfeldeigenschaften kann über die Schaltfläche Hinzufügen je ein neuer Wert zur Auswahlliste hinzugefügt werden. Die Schaltfläche Ändern kann zum Editieren der Auswahlmöglichkeiten benutzt werden. Außerdem kann die Reihenfolge der Optionen geändert werden. Wird kein spezieller Wert für die einzelnen Optionen angegeben, wird der angezeigte Text als Wert zurückgegeben. Diese Einstellung wird über das Kontrollkästchen Wert angeben festgelegt werden.

Über die Schaltfläche Gültigkeit könnten für die meisten Formularfelder eine Gültigkeitsüberprüfung vorgenommen werden. Allerdings sind dazu wiederum Servererweiterungen für MS Frontpage notwendig.

Der HTML-Code für das Formularfeld ohne den Code für die Tabelle sieht wie folgt aus.

<form method=post action="mailto:user@host.com" 
      enctype="text/plain" name="eingabe">
  <p><b><font size="4">So bin ich...</font></b></p>
  <p>
     <b>mein Geschlecht</b>
       männlich <input type="radio" value="maennlich"
                       name="Geschlecht">
       weiblich <input type="radio" value="weiblich"
                       name="Geschlecht">
     <b>mein Alter:</b>
       <input type="text" name="Alter" size="3">
     <b>ich bin eher</b>
       <select size="1" name="aufstehen">
           <option selected>treffen Sie eine Auswahl</option>
           <option value="Frühaufsteher">Frühaufsteher</option>
           <option value="Langschläfer">Langschläfer</option>
       </select>
     <b>Daten dürfen gespeichert werden</b>
       <input type="checkbox" name="speichern" value="ON" checked>
     <b>weitere Bemerkung</b>
       <textarea rows="5" name="Kommentar" cols="50"></textarea>
  </p>
  <p>
    <input type="submit" value="Abschicken" name="submit">
    <input type="reset" value="Zurücksetzen" name="reset">
  </p>
</form>

In diesem Fall wird der Inhalt des Formulars per E-Mail verschickt.


Skript - MS Frontpage
[ Top Zurück ] Inhalt ] Weiter ] Norman May