| ## forms
| forms: Allgemeines zur Verwendung ### Eigenschaften: action (Empfängeradresse bei Absenden) encoding (Kodierungstyp) length (Anzahl Formulare in Datei) method (Übertragungsmethode) name (Formularname) target (Zielfenster für CGI-Antworten) ### Methoden: handleEvent() (Ereignis verarbeiten) reset() (Formulareingaben löschen) submit() (Formular abschicken) ### Unterobjekte: elements

## forms: Allgemeines zur Verwendung

Mit dem Objekt `forms`, das in der JavaScript-Objekthierarchie unterhalb des document-Objekts liegt, haben Sie Zugriff auf Formulare, die in einer HTML-Datei definiert sind.

Es stehen folgende Arten zur Verfügung, mit JavaScript ein bestimmtes Formular anzusprechen:

### Schema 1 / Beispiel 1:

    document.forms[#].Eigenschaft
    document.forms[#].Methode()

    Ziel = document.forms[0].action;
    document.forms[0].reset();

### Schema 2 / Beispiel 2:

    document.forms["FormularName"].Eigenschaft
    document.forms["FormularName"].Methode

    Ziel = document.forms["Testformular"].action;
    document.forms["Testformular"].reset();

### Schema 3 / Beispiel 3:

    document.FormularName.Eigenschaft
    document.FormularName.Methode()

    Ziel = document.Testformular.action;
    document.Testformular.reset();

### Erläuterung:

Formulare können Sie auf drei Arten ansprechen:

- mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
  Bei Verwendung von Indexnummern geben Sie `document.forms` an und dahinter in eckigen Klammern, das wie vielte Formular in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Formular sprechen Sie mit `forms[0]` an, das zweite Formular mit `forms[1]` usw. Beim Zählen gilt die Reihenfolge, in der die `<form>`-Tags in der Datei notiert sind.
- mit Namen des Formulars als Indexnamen (wie in Schema 2 / Beispiel 2)
  Dabei notieren Sie wie beim Ansprechen mit Indexnummer hinter `document.forms` eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen, den Sie bei der Definition des Formulars im einleitenden `<form>`-Tag im Attribut `name=` angegeben haben.
- mit dem Namen des Formulars direkt (wie in Schema 3 / Beispiel 3)
  Dabei geben Sie mit `document.FormularName` den Namen an, den Sie bei der Definition des Formulars im einleitenden `<form>`-Tag im Attribut `name=` angegeben haben.

Die Eigenschaften und Methoden des forms-Objekts betreffen nur Bestandteile des gesamten Formulars, etwa die Kodiermethode. Um auf einzelne Eingabefelder, Buttons usw. zuzugreifen, steht das elements-Objekts mit seinen Unterobjekten zur Verfügung.

## action

Speichert den Wert, der bei der Definition des Formulars im Attribut `action=` steht, also etwa eine mailto-Angabe oder ein Server-Programm, das die Formulardaten verarbeitet.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    <!--
    function Bestaetigung() {
     var x = window.confirm("Dieses Formular geht an " + document.Testform.action);
     return x;
    }
    //-->
    </script>
    </head><body>
    <form name="Testform" action="mailto:duselbst@deine.com"
    onSubmit="return Bestaetigung()">
    <input type="text" size="40" name="Eingabe">
    <input type="submit" value="Absenden">
    </form>
    </body></html>

### Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion `Bestaetigung()` aufgerufen, weil im einleitenden `<form>`-Tag der Event-Handler `onSubmit=` notiert ist. Dieser ermittelt den Rückgabewert der Funktion `Bestaetigung()`. Ist der Rückgabewert `true`, wird das Formular abgeschickt, ist er `false`, wird es nicht abgeschickt.

Innerhalb der Funktion `Bestaetigung()` erhält der Anwender mit der confirm-Methode ein Dialogfenster, in dem ihm der Wert der Formularangabe `action` angezeigt wird. Confirm-Fenster haben stets zwei Buttons, einen zum Bestätigen und einen zum Abrechen. Der Button zum Bestätigen gibt bei Anklicken `true` zurück, der Abbrechen-Button `false`. Der Rückgabewert wird im Beispiel in der Variablen `x` gespeichert. Diese wird wiederum von der Funktion `Bestaetigung()` selbst zurückgegeben, denn der aufrufende Event-Handler erwartet ja einen solchen Rückgabewert.

### Beachten Sie:

Die Verwendung von `mailto:` als Zieladresse eines Formulares verursacht häufig Probleme. Mehr dazu im Abschnitt Formulare als E-Mail.

Sie können als Zieladresse eines Formulares auch eine HTML-Datei angeben und Formulardaten mittels JavaScript verarbeiten. Berücksichtigen Sie dabei, dass JavaScript nur dann Zugriff auf Daten hat, wenn die Methode `get` verwendet wurde.
Opera 5.12 zeigt im Protokoll `file` den Quelltext der Zieldatei an.

## encoding

Speichert den Wert, der bei der Definition des Formulars im Attribut `encoding=` steht, also zum Beispiel "text/plain".

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    <!--
    function CodeTyp() {
     if(document.Testform.action.indexOf("@") > 0)
      document.Testform.encoding = "text/plain";
     else
      document.Testform.encoding = "x-application/x-www-form-urlencoded";
     return true;
    }
    //-->
    </script>
    </head><body>
    <form name="Testform" action="mailto:duselbst@deine.com"
    onSubmit="return CodeTyp()">
    <input type="text" size="40" name="Eingabe">
    <input type="submit" value="Absenden">
    </form>
    </body></html>

### Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion `CodeTyp()` aufgerufen.

Innerhalb der Funktion `CodeTyp()` wird ermittelt, ob in der `action`-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrät. Wenn ja, wird der Kodierungstyp auf `text/plain` gesetzt, ansonsten auf den für CGI-Programme üblichen Kodiertyp `x-application/x-www-form-urlencoded`. Die Funktion `CodeTyp()` gibt `true` zurück, denn der aufrufende Event-Handler `onSubmit` im einleitenden `<form>`-Tag erwartet einen solchen Rückgabewert. Das Formular wird nur abgeschickt, wenn der Rückgabewert `true` ist.

Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode `indexOf()`, lesen Sie den Abschnitt über das string-Objekt.

### Beachten Sie:

Die Verwendung von `mailto:` als Zieladresse eines Formulares verursacht häufig Probleme. Mehr dazu im Abschnitt Formulare als E-Mail.

## length

Speichert die Anzahl der Formulare, die in einer Datei definiert sind.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    </head><body>
    <form name="Testform" action="mailto:duselbst@deine.com">
    <input type="hidden" value="Guildo">
    <input type="submit" value="Guildo">
    </form>
    <form name="Testform" action="mailto:duselbst@deine.com">
    <input type="hidden" value="Heino">
    <input type="submit" value="Heino">
    </form>
    <script type="text/javascript">
    <!--
     document.write(document.forms.length + " Formulare");
    //-->
    </script>
    </body></html>

### Erläuterung:

Im Beispiel werden zwei kleine Formulare definiert. Am Ende wird mit Hilfe von document.write() zum Testen in die Datei geschrieben, wie viele Formulare darin definiert sind.

## method

Speichert den Wert, der bei der Definition des Formulars im Attribut `method=` steht, normalerweise "get" oder "post".

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    <!--
    function Methode() {
     if(document.Testform.action.indexOf("@") > 0)
      document.Testform.method = "post";
     else
      document.Testform.method = "get";
     return true;
    }
    //-->
    </script>
    </head><body>
    <form name="Testform" action="mailto:duselbst@deine.com"
    onSubmit="return Methode()">
    <input type="text" size="40" name="Eingabe">
    <input type="submit" value="Absenden">
    </form>
    </body></html>

### Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion `Methode()` aufgerufen.

Innerhalb der Funktion `Methode()` wird ermittelt, ob in der `action`-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrät. Wenn ja, wird die Versandmethode auf `post` gesetzt, ansonsten auf `get`. Die Funktion `Methode()` gibt `true` zurück, denn der aufrufende Event-Handler `onSubmit` im einleitenden `<form>`-Tag erwartet einen solchen Rückgabewert. Das Formular wird nur abgeschickt, wenn der Rückgabewert `true` ist.

Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode `indexOf()`, lesen Sie den Abschnitt über das string-Objekt.

### Beachten Sie:

Die Verwendung von `mailto:` als Zieladresse eines Formulares verursacht häufig Probleme. Lesen Sie hierzu den Abschnitt Formulare als E-Mail.

## name

Speichert den Namen eines Formulars.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    </head><body>
    <form name="Testform" action="mailto:duselbst@deine.com">
    <input type="text" size="40" name="Eingabe">
    <input type="submit" value="Absenden">
    </form>
    <script type="text/javascript">
    <!--
     document.Testform.Eingabe.value = document.Testform.name;
    //-->
    </script>
    </body></html>

### Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld. Unterhalb des Formulars steht ein Script, das in das Eingabefeld zur Kontrolle den Namen des Formulars schreibt. Im Beispiel ist das der Name `Testform`.

## target

Speichert, welches Fenster im Falle eines Frame-Sets nach dem Absenden aktiv werden soll. Das kann etwa bei Frame-Fenstern oder bei separaten Zweitfenstern interessant sein. Falls ein CGI-Programm HTML-Code an den Browser zurückschickt, zum Beispiel mit einem "Danke für das Absenden des Formulars", dann erscheint die Ausgabe in dem Fenster mit dem angegebenen Namen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    <!--
    function Ziel() {
     document.Testform.target = "unten";
     return true;
    }
    //-->
    </script>
    </head><body>
    <form name="Testform" action="datei.htm"
    onSubmit="return Ziel()">
    <input type="text" size="40" name="Eingabe">
    <input type="submit" value="Absenden">
    </form>
    </body></html>

### Erläuterung:

Das Beispiel nimmt an, dass sich die Datei mit dem Formular in einem Frame-Set befindet, in dem es noch ein anderes Frame-Fenster gibt, und zwar eines mit dem Namen `unten`. Die Beispieldatei enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion `Ziel()` aufgerufen.

Innerhalb der Funktion `Ziel()` wird bestimmt, dass die HTML-Ausgabe das `action`-Ziels im Frame-Fenster `unten` erfolgt.

## handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie handleEvent() beim window-Objekt (nähere Informationen siehe dort).

## reset()

Löscht alle Eingaben in einem Formular und hat die gleiche Wirkung wie ein Button, der in HTML mit `type="reset"` definiert wurde.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    </head><body>
    <form name="Testform" action="">
    <input type="text" size="40" name="Feld1"><br>
    <input type="text" size="40" name="Feld2"><br>
    </form>
    <a href="javascript:document.Testform.reset()">Formular leeren</a>
    </body></html>

### Erläuterung:

Das Beispiel enhält ein Formular mit zwei Eingabefeldern. Unterhalb des Formulars steht ein Verweis. Beim Anklicken des Verweises weren alle Eingaben in dem Formular gelöscht.

## submit()

Sendet ein Formular ab und hat die gleiche Wirkung wie ein Button, der in HTML mit `type="submit"` definiert wurde. Die JavaScript-Methode funktioniert seit Netscape 3.0 jedoch nur noch, wenn das Formular von einem Programm weiterverarbeitet wird, d.h. wenn im einleitenden `<form>`-Tag bei der Angabe `action=` zum Beispiel ein CGI-Programm aufgerufen wird. Wenn bei `action=` eine E-Mail-Adresse oder eine Newsgroup angegeben wird, funktioniert sie nicht.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    </head><body>
    <form name="Testform" action="/cgi-bin/auswert.pl" method="get">
    <input type="text" size="40" name="Feld1"><br>
    <input type="text" size="40" name="Feld2"><br>
    </form>
    <script type="text/javascript">
    <!--
     function AbGehts()
     {
      document.Testform.submit();
     }
     window.setTimeout("AbGehts()",60000);
    //-->
    </script>
    </body></html>

### Erläuterung:

Das Beispiel enthält ein Formular mit Eingabefeldern. Unterhalb davon steht ein JavaScript. Darin wird mit der setTimeout()-Methode ein Countdown gestartet. Nach 60000 Millisekunden, also nach einer Minute, wird die Funktion `AbGehts()` aufgerufen. Diese schickt das Formular mit `submit()` ab.

| elements
| applets

© 2001 selfhtml@teamone.de