JavaScript/DOM/Document/forms

Das Objekt document.forms gibt einer HTMLCollection alle form-Elemente eines Dokument zurück. Mit dem Unterobjekt elements haben Sie Zugriff auf Elemente eines Formulars.

Unterobjekte

• window
  • document
    • anchors
    • forms
      • elements
        • options
    • images
    • links

Eigenschaften

• action
• encoding
• length
• method
• name
• target

Methoden

• handleEvent()
• reset()
• submit()

Verwendung

Formulare können Sie auf vier Arten ansprechen:

Beispiel: Schema 1 mit Index-Operator

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

1. mit einer Indexnummer:

Bei Verwendung von Indexnummern geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte 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. Sie können zwischen den eckigen Klammern auch eine Number-Variable notieren, die die Indexnummer enthält.

Beispiel: Schema 2 mit Namen

       document.Formularname.Eigenschaft
       document.Formularname.Methode()
Ziel = document.Testformular.action;
       document.Testformular.reset();

2. mit dem Namen des Formulars direkt über das document-Objekt:

Wie auch verschiedene andere Elemente mit name-Attributen können Sie Formulare mit Namen als Objekte direkt unterhalb des document-Objekts ansprechen. Dabei geben Sie mit document.Formularname den Namen an, den Sie bei der Definition des Formulars im einleitenden form-Tag im name-Attribut angegeben haben.

Beispiel: Schema 3 mit Namen

       document.forms.Formularname.Eigenschaft
       document.forms.Formularname.Methode
Ziel = document.forms.Testformular.action;
       document.forms.Testformular.reset();

3. mit dem Namen des Formulars über das document.forms-Objekt:

Diese Methode ist gleichwertig zum Schema 2, das Formular liegt allerdings unter document.forms. Dieses Schema erlaubt verständlicheren Code, denn es ist sofort ersichtlich, dass ein Formular angesprochen wird. Geben Sie mit document.forms.Formularname den Namen an, den Sie bei der Definition des Formulars im einleitenden form-Tag im Attribut name angegeben haben.

Beispiel: Schema 4 mit Namen als Indexnamen

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

4. mit dem Namen des Formulars als Indexnamen:

Diese Art ist eine zu Schema 3 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Notieren Sie wie beim Ansprechen mit Indexnummer (Schema 1) 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. Diese Schreibweise hat den Vorteil, dass Sie zwischen den eckigen Klammern auch eine String-Variable notieren können, die den Formularnamen enthält.

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-Objekt mit seinen Unterobjekten zur Verfügung.

Zugriff mit DOM-Methoden

Alternativ können Sie über die Methoden des document-Objekts auf ein Formular und seine Elemente zugreifen.

• getElementById(): kann auf Elemente zugreifen, die ein dokumentweit eindeutiges id-Attribut enthalten
• getElementsByName(): kann auf Elemente zugreifen, die einen Namen besitzen (er muss nicht unbedingt eindeutig sein)
• getElementsByTagName(): kann auf alle Elemente zugreifen in der Form: "liefere mir das 27. td-Element im Dokument".
• querySelector(): gibt das erste Element zurück, das dem angegebenen CSS-Selektor entspricht.
• querySelectorAll(): gibt eine Liste von Elementen zurück, die dem angegebenen CSS-Selektor (auch mehrere, durch Komma getrennte, Angaben möglich) entsprechen

Weblinks

• W3C: forms of type HTMLCollection

• MDN document.forms