JavaScript/DOM/Document/forms

Die Eigenschaft forms des Document-Objekts gibt alle <form>-Elemente eines Dokuments als HTMLCollection zurück. Mit der Eigenschaft elements eines einzelnen <form>-Elements haben Sie weiter Zugriff auf die Elemente des 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 mehrere Arten ansprechen:

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

Schema 1 - mit Name

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

Dies ist die von uns empfohlene Methode. Sie macht deutlich, dass Sie ein Formular ansprechen möchten, und es kann zu keinen Namenskonflikten kommen. 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.

Was Sie hier sehen, ist ein Zugriff auf Werte, die als Eigenschaften eines Objekts gespeichert sind. JavaScript bietet dafür einerseits die gezeigte Punkt-Schreibweise objekt.eigenschaft an, andererseits aber auch die von Arrays bekannte Indexschreibweise: objekt["eigenschaft"]. Auch beim Zugriff auf die Einträge des forms-Objekts können Sie diese Schreibweise nutzen. Das ist vor allem dann vorteilhaft, wenn Sie den Namen des Forms erst zur Laufzeit kennen und in einer Variablen gespeichert haben.

Schema 1 - mit Indexer

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

let formularname = "Testformular";       // Verwendung einer Variablen für den Zugriff
Ziel = document.forms[formularname].action;

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

Schema 2 mit Namen

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

Es gibt mehrere Elementtypen mit name-Attributen, die Sie als Objekte direkt unterhalb des document-Objekts ansprechen können. Formulare gehören dazu. Der Umstand, dass so auch andere Elemente über ihren Namen gefunden werden können können, kann jedoch Namenskonflikte herbeiführen, und man sieht dem Code nicht mehr an, dass ein Formular angesprochen wird. Für diese Zugriffsart geben Sie mit document.Formularname den Namen an, den Sie bei der Definition des Formulars im einleitenden form-Tag im name-Attribut angegeben haben.

Wie im Schema 1 können Sie an Stelle der Punkt-Schreibweise auch die Index-Schreibweise nutzen.

3. mit einer Indexnummer:

Nicht empfohlen! Bei Verwendung von Indexnummern geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in der Datei Sie meinen. Aber tun Sie das bitte nur, wenn Sie überhaupt keine andere Möglichkeit finden, Ihr Formular zu identifizieren. Indexpositionen sind zerbrechlich, d. h. sie können sich bei Änderungen an der Seite unbemerkt mit verändern. Verwenden Sie Indexnummern nur, wenn Sie auf einer Seite mehrere gleichartige Formulare haben und im Script übergreifend manipulieren müssen.

Schema 3 mit Index-Operator

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

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.

Die Eigenschaften und Methoden des forms-Objekts betreffen nur das Formular als Ganzes, etwa die Kodiermethode oder die Adresse, an die das Formular beim Absenden geschickt werden soll. 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