070 Formulare, Demo 1

• Verarbeitung durch ein CGI-Skript (CGI = Common Gateway Interface, ein serverseitiges Programm, das mit Skriptsprachen wie Perl (Practical Extraction and Report Language), JavaScript, VBScript, C, C++, Delphi-Pascal o.ä. erstellt worden ist).
  Die Programmierung der CGI-Skripts ist serverspezifisch (Unix, Mac, Windows NT, ...) und übersteigt den Rahmen dieser Einführung. In einem späteren Beispiel wird lediglich der Aufruf eines (bekannten) CGI-Skripts gezeigt.
  
• Weiterleitung an eine eMail. Wird hier demonstriert.

Ein Problem muß angesprochen werden: Wenn man formulare ausschließlich mit HTML-Werkzeugen behandelt, ist keine Kontrolle darüber möglich, ob der Benutzer das formular richtig ausgefüllt hat. Erst wenn man formulare mit JavaScript behandelt, sind Vollständigkeitskontrollen oder Plausibilitätskontrollen möglich.

Das spätere Formular zeigt einen einfachen Aufbau, bei dem die formularelemente in wesentlichen untereinander stehen und die Beschriftungen meistens rechts neben den Elementen stehen. Für einen flexibleren und besseren Aufbau verwende man Tabellen ohne Rahmen. Damit ist es auch möglich, Beschriftungen links statt rechts anzubringen (was erstrebenswert ist) und dennoch die Elemente in einer einheitlichen Position zu plazieren, was ohne Tabellen nicht gut möglich ist, da die Beschriftungen in der Regel unterschiedlich lang sind.

Mit Style-Sheets (Formatvorlagen) kann das Positionierproblem ebenfalls gelöst werden.

   
     <form method="post" action="...">
       ...
       ...
     </form>
   

Technische Details zu post und Get:

• Bei post werden die Daten auf dem Server so behandelt, als kämen sie von der Tastatureingabe. Es wird kein EoF (end of file) gesendet; das CGI-Programm muß aus der CGI-Umgebungsvariablen CONTENT_LENGTH die Länge der gesendeten Daten ermitteln.
  Bei Weiterleitung des formulars als eMail ist immer post notwendig. Es wird empfohlen, in diesem Fall im form-Tag auch noch das optionale Attribut enctype="text/plain" mit dem genannten Wert aufzunehmen, damit die Formulardaten in der eMail richtig formatiert sind. Man teste!

• Bei get werden die formulardaten auf dem Server in der CGI-Umgebungsvariablen QUERY_STRING gespeichert, die dann vom CGI-Programm ausgelesen und verarbeitet wird.

Mit dem Attribut action wird festgelegt, was mit den formulardaten beim Absenden geschehen soll: Entweder Aufruf eines CGI-Skript auf dem Server (wird hier aus bereits erklärten Gründen nicht behandelt) oder mit "mailto:..." Absenden an eine eMail-Adresse.
Dazu ein Beispiel:

   
     <form method="post"
        action="mailto:anton@huber-online.de.de">
        enctype="text/plain"
        ...
        ...
     </form>
   

Das formular enthält neben beliebigen Texten in beliebigen Auszeichnungen und auch Grafiken insbesonders:

• Tag input. Für einzeilige Texteingaben, Schaltflächen, Checkboxen und Radiobuttons.
  Für jedes Element ist eigener input-Tag notwendig.
• Tag textarea. Für mehrzeilige Texteingaben
• Tag select. Auswahl aus einem Listenfeld

Zum input-Tag

Mit dem Attribut <name="..." wird der Bezeichner des Eingabefeldes festgelegt, der zusammen mit den Benutzereingaben abgesendet wird.

1. text. Einzeilige Eingabefelder
   Mit dem Attribut size="..." wird die Größe des Eingabefeldes in Anzahl der Schreibstellen festgelegt.
   Mit dem optionalen Attribut value="..." können Voreinstellungen in die Eingabefelder geschrieben werden, ansonsten sind die Felder leer.

2. submit. Schaltfläche zum Absenden des formulars
   Mit dem Attribut value wird die Beschriftung der Schaltfläche festgelegt.

3. reset. Schaltfläche zum Löschen aller Eingaben.
   Mit dem Attribut value wird die Beschriftung der Schaltfläche festgelegt.
   Nach dem Betätigen dieser Schaltfläche wird der Ausgangszustand des formulars inklusive eventueller Voreinstellungen wiederhergestellt (reset).

4. checkbox. Kleine quadratische Kontrollkästchen zur beliebiger Auswahl von optionen.
   Mit der Maus kann die Checkbox sowohl aktiviert, als auch deaktiviert werden. Die Aktivierung wird durch ein Häkchen angezeigt.
   

   Bei Aktivierung der Checkbox wird nach dem Absenden des formulars der Wert des Attributs value an den Server übertragen; bei Nichtaktivierung wird ein Leerstring übertragen.

   Mit dem optionalen Attribut checked (kein Wert) kann die Voreinstellung der Checkbox auf aktiviert festgelegt werden.
   Man achte darauf, dass vor oder nach der Checkbox mit normalem Text eine Checkbox-Beschriftung geschrieben wird, sonst wird die Checkbox zum Blindflug.

5. radio. optionsfelder (Radiobutton, kleine Kreise) zur Auswahl einer von mehreren optionen.
   Mit der Maus kann nur einer der Radionbuttons aktiviert werden, als auch deaktiviert werden. Die Aktivierung wird durch einen Punkt angezeigt.

   Bei Aktivierung des Radiobuttons wird nach dem Absenden des formulars der Wert des Attributs value an den Server übertragen; bei Nichtaktivierung wird ein Leerstring übertragen.

   Mit dem optionalen Attribut checked (kein Wert) kann die Voreinstellung eines der Radiobuttons auf aktiviert festgelegt werden.
   

   Man achte darauf, dass vor oder nach den Radiobuttons mit normalem Text Radiobutton-Beschriftung geschrieben werden, sonst werden die Radiobuttons zum Blindflug.

   Man achte unbedingt darauf, dass die zu einer Gruppe gehörenden Radiobuttons beim Attribut name den gleichen Wert bekommen!

6. password. Passwort-Eingabe
   Die eingegebenen Zeichen werden auf dem Bildschirm als Sternchen * dargestellt. Mit dem Attribut size="..." wird die Größe des Eingabefeldes in Anzahl der Schreibstellen festgelegt.

7. hidden. Verborgenes Feld
   Damit können die mit dem Attribut value festgelegten Werte (konstante Werte auf die der Benutzer keinen Einfluß hat) übergeben werden.

8. file. Übergabe (uploaden) einer Datei
   Dieser Wert von type-Wert File erzeugt ein Eingabefeld für den Pfad- und Dateinamen. Besser als die händische Eingabe ist die Benutzung der Schaltfläche mit der Aufschrift "Durchsuchen...", mit der ein Dialogfeld zur bequemen Dateiauswahl mit Mausklick geöffnet wird.

Zum textarea-Tag

<textarea name="..." cols="..." rows="..." ... > ..... </textarea>

Mit den Attributen cols="..." und rows="..." wird die Größe des mehrzeiligen Eingabefeldes in Textzeichen pro Zeile und Zeilenzahl festgelegt. Der Eingabetext kann aber größer sein als das mehrzeilige Eingabefeld; es besitzt zu diesem Zweck Bildlaufleisten.

Befindet sich zwischen dem Anfang- und End-Tag Text, so wird dieser als Voreinstelltext in das mehrzeilige Eingabefeld geschrieben.

Zum select-Tag

Der Tag besitzt einen End-Tag und hat das format:

   
   <select name="..."  [multiple] [size="..."] [value="..."]>
      <option>optionswert_1</option>
      <option>optionswert_2</option>
      ....
      <option>optionswert_n</option>
   </select>
   

Mit dem Attribut <name="..." wird der Bezeichner des Listenfeldes festgelegt.

Mit dem Attribut <size="..." wird die Anzahl der sichtbaren Zeilen im Listenfeld festgelegt.

Mit dem Attribut <multiple wird festgelegt, dass beliebig viele Elemente aus der Liste ausgewählt werden. Mit gedrückter Strg-Taste können mehrere Elemente zur Auswahl markiert werden.

Mit dem Attribut <size="..." wird die Anzahl der sichtbaren Zeilen im Listenfeld festgelegt.

Mit dem (Unter-) Tag <option> werden die einzelnen Optionen festgelegt.

Zum Verständnis des folgenden Formulars ist das Betrachten des Quellcodes notwendig.

Zurück zur Startseite