070 Formulare, Demo 1


Formulare dienen dazu, Benutzereingaben (z.B. Bestellinformationen) an den Server abzuschicken. Diese Daten müssen auf dem Server abgelegt und weiterverarbeitet werden. Das kann geschehen durch:

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.


Ein formular wird mit dem form-Tag innerhalb des body-Tags beschrieben.
   
     <form method="post" action="...">
       ...
       ...
     </form>
   
Beim Attribut method ist statt des Wertes post (zu bevorzugende methode) auch noch der Wert Get möglich.

Technische Details zu post und Get:

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>
   
Mit enctype="text/plain" Zeilenumbruch in der eMail nach jedem Element

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


Zum input-Tag

Der Tag input besitzt keinen End-Tag und hat das format:
<input type="..." name="..." [size="..."] [value="..."] [checked] ... >

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


Die wichtigsten Werte für das Attribut type:
  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

Mit dem Tag textarea können mehrzeilige Eingabefelder erzeugt werden.
Dieser Tag besitzt einen End-Tag und hat das format:

<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 select dient zur Auswahl eines Elementes aus einer Liste oder in Verbindung mit dem optionalen Attribut multiple von beliebig vielen Elementen aus einer Liste.

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.


Vor- und Nachname <input type="text" ...>
Passwort <input type="password" ...>
Mehrzeilige Eingabe <textarea ... >

Checkbox 1 <input type="checkbox" ...>
Checkbox 2
bis 10 Jahre       <input type="radio" ...>
11 bis 20 Jahre   Wenn eine Gruppe von Radio (-Buttons) sich gegen-
21 bis 40 Jahre   seitig ausschließen soll, dann müssen sie mit name
über 40 Jahre     alle den gleichen namen bekommen.
Zu übertragende Datei <input type="file" ...>

Auswahl eines Elementes aus einer Liste <select ...>

Auswahl mehrerer Elemente aus einer Liste <select multiple ...>
Mit gedrückter Strg-Taste können mehrere Elemente markiert werden.

Verstecktes Steuerelement <input type="Hidden" name="..." value="..." ...>
.
<input type="submit" ...>
<input type="reset" ...>

Zurück zur Startseite