Eingabe über Formulare

Im DOM (Document Object Model) werden alle Elemente einer Website durch Objekte repräsentiert, die hierarchisch angeordnet sind. Auch ein Formular besteht aus mehreren Objekten, die zueinander in Beziehung stehen. Die Adressierung von Formularelementen (auch Formularobjekte genannt) ist wichtig, wenn es darum geht, was ein Anwender in ein Textfeld eingegeben hat, oder wenn man über JavaScript einen Wert in ein Textfeld schreiben möchte.

Das Form-Objekt

Ein Formular umfasst eine beliebige Anzahl von Formularelementen und wird in HTML mit dem <form>-Tag erzeugt. Ein oder mehrere Formularelemnet müssen also immer zwischen den Tags <form> und </form> stehen. In JavaScript wird ein Formular durch das Form-Objekt repräsentiert.

Der folgende Beispiel-Code:

erzeugt ein Form-Objekt mit dem Namen meinFormular:

An sich gibt es zwei Möglichkeiten, um auf ein Formular zuzugreifen: Zugriff über das forms-Array, oder Zugriff über den Namen (bzw. der id) des Form-Objekts.

Im forms-Array sind alle Formulare eines Dokuments abgebildet. Das erste Formular, das im HTML-Code vorkommt lässt sich über document.forms[0] ansprechen. Da das aber bei längeren Codes schwierig werden kann zu zählen, ist es besser das Formular über seinen namen anzusprechen. Das Formular im oben genannten Code kann mit: document.meinFormular angesprochen werden (da meinFormular der Name ist), oder auch mit document.getElementById(„meinFormular“).Beim letzteren bezieht sich die Angabe meinFormular jedoch auf das id-Attribut im <form>-Tag. Für die erstere Schreibweise ist der Nam, der über die name-Eigenschaft gesetzt wird, ausschlaggebend.

Formularelemente

Jedes Formular wird durch ein eigenes Objekt dargestellt, das dem jeweiligen Form-Objekt untergeordnet ist. Für die Adressierung der Formularobjekte gibt es wieder zwei Möglichkeiten: entweder über das elements-Array, oder über Namen bzw wieder der id des Formularelements.

Jedes Form-Objekt kennt das elements-Array, in dem alle untergeordneten Formularelemente verzecihnet sind

Die Formularelemente lassen sich in der gleichen Reihenfolge, wie sie im HTML-Code erscheinen, ansprechen. Somit würde sich das erste Elemente , also der erste Button ansprechen mit: document.meinFormular.elements[0]. Dementsprechend muss man erst auf das Formular meinFormular zugreifen, um die darin enthaltenen Elemente ansprechen zu können (damit der Computer bei mehreren Formularen weiß, in welchem Formular sich das Element befindet, sonst wäre es nicht eindeutig).Da das ganze aber wieder sehr umständlich und unübersichtlich werden kann, ist es leichter den Formularelementen eindeutige Namen zu geben, um sie mit diesen ansprechen zu können, also z.B. kann das Textfeld mit dem Namen eingabe1 wie folgt angesprochen werden: document.meinFormular.eingabe1. Wenn man es über die id machen möchte, kann man es so schreiben: documrnt.getElementById(„eingabe1).

Jedes Textfeld besitzt die Eigenschaft value, mit der man feststellen kann, was momentan im Textfeld eingegeben ist. In unserem Beispiel können wir mit: text = document.meinFormular.eingabe1.value erfahren, was in dem Textfeld von eingabe1 steht.

this

this ist ein Schlüsselwort, das eine Referenz auf das aktuelle Objekt ist.

form

Jedes Formularobjekt kennt die Eigenschaft form, die eine Referenz auf das übergeordnete form-Objekt darstellt. Damit weiß jedes Formularelement, zu welchem Formular es gehört. Somit kann man auch im Event-Handler von button1 mit this.form auf das Form-Objekt meinFormular zugreifen und von dort kann man dann das Textfeld eingabe1 ansprechen: this.form.eingabe1

Wenn man den Wert von eingabe1 ausgeben möchte kann man das wie folgt tun: alert(this.form.eingabe1.value)

Um das ganze ein wenig bildlicher darzustellen, male ich das in die Baum-Graphik hinein:

Das Text-Objekt – einzeilige Textfelder

Einzeilige Textfelder werden durch das Text-Objekt repräsentiert, bei welchen kein Zeilenumbruch möglich. Häufig sieht werden einzeilige Textfelder von Suchmaschinen verwendet.

So sieht z.B. ein Text-Objekt aus:

In HTML werden Text-Objekte durch das <input>-Tag erzeugt. Da das <input>-Tag für viele verschiedene Formularobjekte verwendet werden kann, muss man mit type noch angeben, welche Art von Formularobjekt man haben möchte. Für das Text-Objekt ist das text:

<input type=“text“ id=“eingabe“ name=“eingabe“ size=“30″ value=“ „>

Das HTML-Attribut value legt fest, welcher Text zu Beginn in der Eingabezeile stehen soll. value=“ “ gibt an, dass die Eingabezeile am Anfang leer sein soll.

Mit size legt man die Länge fest, das heißt, wie viele Zeichen gleichzeitig angezeigt werden sollen. Achtung!!, die Eingabe des Anwenders kann wesentlich länger sein, nur wird dann nur ein Teil des eingegebenen Strings angezeigt.

<input type=“text“ id=“eingabe“ name=“eingabe“ size=“30″ value=“ „>

Den aktuellen Eingabewert des Textfelds kann man mit:

var x = document.getElementById(„eingabe“); var eing = x.value;

Dem Textfeld kann man auch einen neuen Wert zuweisen, indem man die Eigenschaft value verändert:

x.value = „Neuer Text“;

mit dem Event-Handler onchange kann man feststellen, ob der Anwender den Inhalt verändert hat.

Das Textarea-Objekt-mehrzeilige Textfelder

Das Textarea-Objekt wird mit dem <textarea>-Tag erzeugt:

<textarea id=“eingabe“ cols=“30″ rows=“5″ wrap=“virtual“>Standardtext </textarea>

Mit cols (Spalten) und rows (Zeilen) bestimmt man die Anzahl der Spalten bzw. Zeilen des Textfelds. Der Text, der zu Beginn im Textfeld erscheinen soll, wird hier nicht wie beim einzeiligen Textfeld über das value-Attribut angegeben, sondern zwischen dem <textarea>- und </textarea>-Tag platziert.

Das Attribut wrap legt fest, wie Zeilenumbrüche gehandhabt werden. Hier gibt es drei Möglichkeiten: off, virtual und physical. Bei off wird der Text so angezeigt, wie ihn der Anwender eingegeben hat. Es werden vom Browser also keine Zeilenumbrüche eingefügt. Bei virtual wird der Text nur am Bildschirm mit Zeilenumbrüchen gezeigt, der eingegebene String wird dabei nicht verändert. Physical bedeutet, dass Zeilenumbrüche nicht nur angezeigt, sondern auch der String selbst verändert wird.

Das Textarea-Objekt kennt ebenso den onchange-Event-Handler.

Das Password-Objekt

Dieses ist dem Text-Objekt sehr ähnlich, mit dem Unterschied , dass die eingegebenen Zeichen durch ein Sternchen oder ein anderes Symbol dargestellt werden. Das ganze kennt man z.B. aus der Passwort-Eingabe, wenn man sich in seinen Mail -Account einloggt.

Das ganze sieht so aus (falls sich jemand darunter nichts vorstellen kann):

<input type=“password“ id=“pwd“ name=“pwd“ size=“30″>

Den eingegebenen Wert kann man wieder über value auslesen.

Für JavaScript macht es keinen Unterschied, ob es sich um ein Text-, oder ein Password-Objekt handelt. Es ist also für JavaScript egal, wie der Text dem User auf dem Bildschirm angezeigt wird.

Das Hidden-Objekt

Dieses Objekt ist dem Text-Objekt auh wieder sehr ähnlich, außer, dass ein Hidden-Objekt nicht angezeigt wird. Es wird eher dafür verwendet um etwas zwischenzuspeichern, oder sind hilfreich bei der Übergabe von Daten zwischen verschiedenen HTML-Seiten.

<input type=“hidden“ id=“versteckt“ name=“versteckt“ value=“geheim“>

so erzeugt man ein Hidden-Objekt.

Das Button-Objekt

Hierbei handelt es sich um eine Schaltfläche und sieht meist so aus:

Der folgende HTML-Code legt die Eigenschaften einer Schaltfäche fest:

<input type=“button“ value=“Button 1″>

Mit dem Event-Handler onclick kann man angeben, was passieren soll, wenn der Anwender auf die Schaltfläche klickt.

Das Submit-Objekt

Das Submit-Objekt ist wie ein spezielles Button-Objekt zu sehen. Ein Submit-Objekt wird dazu verwendet, um ein Formular über das Internet zu verschicken.

Der folgende HTML-Code erzeugt ein Submit-Objekt:

<input type=“submit“ value=“Abschicken“>

Wenn man keinen Wert für value eingibt, verwendet der Browser einen Standardtext (z.B. Submit, Senden).

Das Reset Objekt

Dieses Objekt ist das Gegentiel zum Submit-Objekt. Damit lassen sich sämtliche Formulareingaben auf ihre Standardwerte zurücksetzen, d.h, alle Eingaben, die der Anwender bisher getätigt hat, werden gelöscht. Das Reset-Objekt wird ebenfalls als Schaltfläche im Webbrowser dargestellt. Der HTML-Code sieht so aus:

<input type=“reset“ value=“Zuerecksetzen“>

Genauso wie onsubmit gehört der onreset-Event-Handler zum Form-Objekt. Damit kann man erfahren, wenn der Anwender die Reset-Schaltfläche geklickt hat

Das Checkbox-Objekt

Checkboxen sind Auswahlfelder, mit denen man eine Option aktivieren, oder deaktivieren kann.

Auch Checkboxen werden über das <input>-Tag erzeugt:

<input type=“checkbox“ id=“auswahl“ name=“auswahl“ checked=“checked“>Auswahl

Wenn die Checkbox beim ersten Aufruf der HTML-Seite markiert sein, verwendet man das Attribut checked.

Über die Eigenschaft checked des Checkbox-Objekts können wir den aktuellen Zustand der Checkbox erfahren.

checked nimmt den Wert true an, wenn das Feld markiert ist. Ansonsten ist checked gleich false. Der Zustand einer Checkbox kann geändert werden, indem man der Eigenschaft checked die Werte true oder false zuweist. Also in dem obigen Beispiel:

document.meinFormular.auswahl.checked = true;

Somit kann man sicherstellen, dass die Checkbox makiert ist.

Der inchange-Event-Handler wird auch hier wieder benutzt, wenn der Anwender den Zustand der Checkbox verändert.

Das Radio-Objekt

Dieses ist der Checkbox sehr ähnlich, nur dass Radio-Objekte zu einer Gruppe zusammengefasst werden. Innerhalb einer Gruppe kann nur ein einziges Element ausgewählt werden.

Der folgende HTML-Code erzeugt eine Gruppe mit 3 Radio-Objekten:

alle drei Radio-Objekte gehören zu einer Gruppe zusammengehöriger Radiobuttons. Das kann man daran erkennen, dass sie die gleichen id- und name-Eigenschaften haben. Dies erschwert den Zugriff auf die Objekte ein wenig. Die einzelnen Elemente der Radiobutton-Gruppe lassen sich durch eine Array-Adressierung ansprechen. Die Radiobutton-Gruppe heißt auswahl und somit kann man mit: document.meinFormular.auswahl[0] auf den ersten Radiobutton zugreifen. So kann man auch mit: document.meinFormular.auswahl[0].checked überprüfen, ob die erste Option ausgewählt ist.

Leider, muss man mit einer Schleife herausfinden, welcher Radiobutton aktiviert ist. Die Schleife kann z.B. so aussehen:

Damit man die Abfrage nicht immer programmieren muss, kann man eine allgemeine Funktion definieren:

Als Argument wird eine Referenz auf eine Radiobutton-Gruppe erwartet, also hier: document.meinFormular.auswahl

Die Funktion liefert dann das ausgewählte Radio-Objekt zurück. Ein Aufruf der Funktion könnte so aussehen:

Das Select-Objekt – Einfachauswahl

Hier kann nur ein Eintrag der Liste markiert werden. Ein Select-Objekt sieht so aus:

Das ganze kennt man z.B. aus den Shopping-Seiten, wie beispielsweise H&M, wenn man eine Kleidergröße wählen soll. Dort kann man auch nur eine Größe wählen und nicht mehrere.

Der folgende Code erzeugt eine Auswahlliste mit drei Elementen:

Wie euch vielleicht aufgefallen ist, werden Select-Objekte nicht mit dem <input>-Tag erzeugt, sondern mit <select>.

Meistens wird das Select-Objekt so dargestellt, dass es eine aufklappbare Liste ist, bei der im Ausgangszustand nur das selektierte Element angezeigt wird.

Sollen mehrere Einträge gleichzeitig angezeigt werden, kann dies über das Attribut size angegeben werden.:

<select id=“liste“ name=“liste“ size=“5″>……..</select>

Bei Select-Objekten mit Einfachauswahl zeigt selectedIndex an, welches Element ausgewählt ist.

Wenn mehrere Optionen selektierbar sind, werden mehrere Elemente gleichzeitig auf dem Bildschirm angezeigt:

Um eine Mehrfachauswahl zu ermöglichen, muss die Eigenschaft multiple verwendet werden:

Bei einer Mehrfachauswahl zeigt selectedIndex auf das erste ausgewählte Element. Wenn man alle ausgewählten Elemente wissen möchte, muss man (mal wieder) eine Schleife verwenden.

Ein Select-Objekt verändern

Man kann ein Select-Objekt verändern in dem man z.B. mit new Option() neue Einträge zur Liste hinzufügt, Einträge löscht, oder Einträge ändert. Um Einträge zu löschen, müssen diese auf null gesetzt werden, aber Achtung!!!: die Adressierung der nachfolgenden Elemente verschiebt sich dann.

Diese Funktion ändert den Eintrag:

Diese fügt ein neues Element hinzu:

und zuletzt, diese Funktion entfernt ein Element:

uuuund das war’s dann mit der vierten Vorlesung! auf ein Neues, nächste Woche!