JavaScript/DOM/Document/forms/elements

Mit dem Objekt elements, das in der JavaScript-Objekthierarchie unterhalb des forms-Objekts liegt, haben Sie Zugriff auf Elemente eines Formulars.

Unterobjekte

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

Eigenschaften

• checked
• defaultChecked
• defaultValue
• disabled
• form
• length
• name
• readOnly
• type
• value

Methoden

• blur()
• click()
• focus()
• handleEvent()
• select()

Verwendung

Formularelemente können Sie auf folgende Arten ansprechen:

Schema 1

document.forms[#].elements[#].Eigenschaft
document.forms[#].elements[#].Methode()
document.forms[0].elements[0].value = "Unsinn";
document.forms[0].elements[0].blur();

1. mit einer Indexnummer des Formulars und des Elements (wie in Schema 1 / Beispiel 1)

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 document.forms[0] an, das zweite Formular mit document.forms[1] usw. Beim Zählen gilt die Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Dann folgt die Angabe .elements zum Zugriff auf das zugehörige elements-Unterobjekt. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Erneut wird bei 0 zu zählen begonnen, d. h. das erste Element innerhalb eines Formulars hat die Indexnummer 0, das zweite die Indexnummer 1 usw. Sie können zwischen den eckigen Klammern auch eine Zahl-Variable notieren, die die Indexnummer des Formulars bzw. des Formularelements enthält.

Schema 2

document.Formularname.Elementname.Eigenschaft
document.Formularname.Elementname.Methode()
document.Testformular.Eingabe.value = "Unsinn";
document.Testformular.Eingabe.blur();

2. mit dem Namen des Formulars und des Elements 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.Elementname den Namen des Formulars und des Elements an, den Sie bei der Definition des Formulars und des Elements in den entsprechenden HTML-Tags im Attribut name angegeben haben.

Schema 3

document.forms.Formularname.elements.Elementname.Eigenschaft
document.forms.Formularname.elements.Elementname.Methode()
document.forms.Testformular.elements.Eingabe.value = "Unsinn";
document.forms.Testformular.elements.Eingabe.blur();

3. mit dem Namen des Formulars und dem Namen des Elements über das document.forms-Objekt und das zugehörige elements-Objekt

Mit document.forms.Formularname wird dabei das Formular angesprochen und über das Unterobjekt .elements.Elementname das fragliche Formularelement. Formularname und Elementname entsprechen jeweils dem name-Attribut des form- bzw. Formularfeld-Elements, das Sie ansprechen möchten. Diese lange Schreibweise erlaubt verständlicheren Code, denn es ist sofort ersichtlich, dass ein Formularelement angesprochen wird.

Schema 4

document.forms["Formularname"].elements["Elementname"].Eigenschaft
document.forms["Formularname"].elements["Elementname"].Methode()
document.forms["Testformular"].elements["Eingabe"].value = "Unsinn";
document.forms["Testformular"].elements["Eingabe"].blur();

4. mit dem Namen des Formulars und des Elements 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"]. Geben Sie mit document.forms["Formularname"].elements["Elementname"] den Namen des Formulars und des Elements als String an. Diese Schreibweise wird insbesondere für den Zugriff auf Formularelemente benötigt, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 und 3 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Formularnamen bzw. den Elementnamen enthält.

Ein Mischen der genannten Zugriffsvarianten für die Adressierung des Formulars und seiner Elemente ist möglich.

Beispiele: document.forms.Formularname.elements["Elementname"] und document.forms[1].Elementname.

Empfehlung: Sie sollten allerdings abwägen, welche Variante Sie auswählen und diese möglichst konsequent verwenden. Das Ansprechen von Formularen und Formularelementen über die Indexnummer hat einige Tücken. Sobald Sie auf der HTML-Seite die Reihenfolge ändern oder ein weiteres Formular hinzufügen, funktionieren Ihre Scripte nicht mehr zuverlässig.
Alternativ können Sie über die Methoden des document-Objekts wie document.getElementById() auf ein Formular und seine Elemente zugreifen.

Elementtypen

Beachten Sie: Hinter dem, was hier als elements-Objekt bezeichnet wird, verbergen sich in Wirklichkeit mehrere, allerdings sehr ähnliche JavaScript-Objekte. So gibt es Objekte jeweils für die verschiedenen Formularelementtypen: Eingabefelder, Auswahllisten und diverse Arten von Buttons. All diese Objekte werden auf die gleiche Art und Weise angesprochen, Sie unterscheiden sich jedoch in ihren Eigenschaften und Methoden. Bei den Eigenschaften und Methoden in diesem Abschnitt ist daher immer vermerkt, auf welche Elementtypen die jeweilige Eigenschaft bzw. Methode anwendbar ist.

Folgende Elementtypen werden dabei unterschieden (die Verweise führen zu den entsprechenden Beschreibungen in der HTML-Dokumentation):

• Klick-Buttons
• einzeilige Eingabefelder
• mehrzeilige Eingabefelder
• Checkboxen
• Radio-Buttons
• Auswahllisten

Gruppenelemente:

Checkboxen und Radio-Buttons bilden normalerweise Gruppen mehrerer zusammengehöriger Elemente, die einen gleichen Wert im name-Attribut haben und sich nur das value-Attribut unterscheiden. Solche Gruppen mit gleichen Namen bilden in JavaScript wiederum einen Array.

Beispiel

<html>
<head>
  <title>Test</title>
</head>
<body>

  <form name="Formular" action="" method="get">

    <input type="radio" name="Favoriten" value="Heino">
    <input type="radio" name="Favoriten" value="Gildo">
    <input type="radio" name="Favoriten" value="Marianne">

  </form>


  <script>

    document.Formular.Favoriten[2].checked = true;

  </script>

</body>
</html>

Im Beispiel ist ein Formular mit mehreren Radio-Buttons definiert. Die Gruppe zusammengehöriger Radio-Buttons hat den gleichen Namen. In JavaScript können Sie einzelne solcher Buttons ansprechen, indem Sie das Element (als Gruppe) ansprechen. Hinter dem Elementnamen notieren Sie dann in eckigen Klammern die Indexnummer des gewünschten Elements. Im Beispiel wird Favoriten[2] angesprochen. Das ist das dritte Element der Gruppe.

Beachten Sie: Der Zugriff auf die Auswahlmöglichkeiten einer Auswahlliste wird hier nicht beschrieben. Dazu steht das Unterobjekt options zur Verfügung.

Über das elements-Objekt werden gemäß dem HTML-spezifischen DOM die Elementobjekte von Formularelementen angesprochen. Das heißt, Sie haben neben den auf dieser Seite aufgelisteten Zugriff auf weitere Eigenschaften und Methoden, je nachdem, um welchen Elementtyp es sich handelt. Beachten Sie daher die Referenz zu den jeweiligen benutzten HTML-Elementen:

Klick-Buttons:

input oder button

Checkboxen, Felder für Datei-Upload, Versteckte Elemente, Passwortfelder, Radio-Buttons, Abbrechen-Buttons, Absendebuttons und einzeilige Eingabefelder:

input

mehrzeilige Eingabefelder:

textarea

Auswahllisten:

select, optgroup und option

Weblinks

• W3C: elements of type HTMLCollection

• MDN elements