Objekttyp Form - JavaScript Tutorial

Das Objekttyp Form repräsentiert ein komplettes Formular aus dem HTML-Dokument. Das Formular wird mit

<form...> eingeleitet und endet mit </form>. Für jedes definierte Formular existiert ein Array documents.form[].

Bsp. 3 Formular innerhalb eines HTML Dokumentes

document.forms[0]

document.forms[1]

document.forms[2]

Formularelemente

Gemeinsame Eigenschaften, Methoden und Event-Handler:

Eigenschaften

Bsp.:

<form name="Person">

<input type="text" name="Vorname" value="Hallo Welt" size=15><br>

<input type="text" name="Nachname" value=" " size=15><br>

<input type="checkbox" name="Kontrolle">Urlaub<br><br>

<input type=“radio“ name=“Geschlecht“>weiblich

<input type=“radio“ name=“Geschlecht“>männlich

<select name="auswahl" size="1">

<option>Heino</option>

<option>Tom Waits</option>

<option>Nina Hagen</option>

<option>Marianne Rosenberg</option>

</select>

<input type="button" name="Anzeigen" value="Anzeigen">

</form>

...Document.form[0].name                   - Formularname wird ausgegeben

...Document.Person.Vorname.type      - Elementtype wird ausgegeben

...Document.Person.Vorname.value     - Wert “Hallo Welt” wird ausgegeben

Methoden

Bsp.:

            document.Person.Vorname.focus()

Bei Aufruf der Seite befindet sich der Cursor sofort im Textfeld Vorname! Brauchbar

Zum Beispiel bei Falscheingabe. Wenn User im Textfeld etwas falsch eingibt, kann

Meldung erscheine und danach sofort der Cursor ins Textfeld springen!

Event-Handler

Event-Handler definieren zu welchem Zeitpunkt etwas geschehen od. z.B. eine

Function aufgerufen wird!

Bsp.:

            <input type="text" name="Vorname" onblur=”starten()”>

Objektspezifische Eigenschaften, Methoden und Event-Handler

Objekttyp Button

-         Event-Handler onClick

            Wird der Button angeklickt wird die Anweisung ausgeführt!

Bsp:

            <input type="button" name="Anzeigen" value="Anzeigen" onclick=“anzeigen()“>

Hiermit wird mit einem Klick auf den Button die Funktion „anzeigen()“ ausgeführt.

Objekttyp Checkbox

-         Eigenschaft checked

Liefert den Status des Kontrollfeldes „true od.. „false“

Bsp.:

document.Person.Kontrolle.checked

-         Event-Handler onClick

Bsp.:

<input type="checkbox" name="Kontrolle" onclick=“anzeigen()“>

Bei if-Abfragen immer nach true od. false abfragen. Nicht als String „true“ od. „false“ abfragen.

            if (document.Person.Kontrollfeld.checked == true)

und vor allem Vergleichszeichen “==” beachten! Bei einem „=“ wird das Kontrollfeld auf true

gesetzt!

Objekttypen Text, Textarea, Password, Hidden

-         Methode select()

<input type="text" name="Vorname" value="test" size=15 onfocus="select()"><br>

      Diese Methode wird in Zusammenhang mit „onfocus“ verarbeitet. Mit dem Klick in das

Textfeld (onfocus), wird der bestehende Text komplett markiert. Dies dient zum schnelleren

Löschen. Die Funktion select() ist vom System schon vordefiniert. Sie muss nicht noch

erstellt werden.

Beim Objekttyp Hidden geht dies nicht!

-         Event-Handler onChange

<input type="text" name="Vorname" value="test" size=15 onchange="gut()"><br>

Die Funktion “gut()” wird ausgeführt, wenn der Text verändert wurde und das Textfeld

den Eingabefokus verliert!

Bei Hidden und Password nicht anwendbar!

-         Event-Handler onSelect

<input type="text" name="Vorname" value="test" size=15 onselect="gut()"><br>

Die Funktion “gut()” wird ausgeführt, wenn der Text selektiert (markiert) wird.

Objekttyp Radio

-         Eigenschaft checked

Kontrolliert ob ausgewählt ist, gibt „true“ od. „false“ aus.

Document.Person.Geschlecht[0].checked

-         Eigenschaft length

Bei dem Objekttyp Radio „Geschlecht“ handelt es sich ebenfalls um ein Array. Man kann die Anzahl

der Element wie folgt herausbekommen:

             document.Person.Geschlecht.length

Diese Eigenschaft kenn wir ja bereits aus dem Form Objekt. Auch hier liefert die Eigenschaft die

Anzahl der Objekte!

-         Event-Handler onClick

Jeder Radioknopf kann eine Funktion starten. Man kann der ganzen Gruppe „Geschlecht“

Keine onclick Funktion zuweisen, geht nur den einzelnen Radioknöpfen.

<input type=“radio“ name=“Geschlecht“ onclick=“fahren()“>

Objekttyp Select

<select name="auswahl" size="1" multiple>

<option>Heino</option>

<option>Tom Waits</option>

<option>Nina Hagen</option>

<option>Marianne Rosenberg</option>

</select>

-         Eingenschaft length

Gibt die Anzahl der Auswahlmöglichkeiten an.

document.Person.auswahl.length

-         Eigenschaft options

Das Array options enthält alle Einträge der Auswahlliste

Options[0]

Options[1]

Usw.

-         Eigenschaft selectedIndex

Gibt an welches Array markiert ist z.B. 0 od. 1

document.Person.auswahl.selectedIndex

Dient später für das auslesen des Wertes als Text!!!

-         Eigenschaft type

Gibt den Typ der Auswahl an, select-one od. select-multple (Mehrauswahl möglich)

            document.Person.auswahl.type

-         Event-Handler onChange

Wenn eine Auswahl getroffen bzw. geändert wird, wird eine Funktion aufgerufen

<select name="auswahl" size="1" onchange="gut()">

-         Unterobjekttyp Options

1.      Eigenschaft length

Bestimmt die Länge des Arrays und ist damit identisch mit dem Attribut length des

Übergeordneten Select-Objektes.

document.Person.auswahl.options.length

2.      Eigenschaft selected

Mit dieser Eigenschaft kann ermittelt werden, welche Werte der Auswahl/Arrays

Markiert sind.

document.Person.auswahl.options[2].selected

Wenn Wert markiert dann true, ansonsten false.

od.

document.Person.Auswahl.options[2].selected = true

Eine Auswahl automatisch ermöglichen

3.      Eigenschaft text

Der ausgewählte definierte Werte wird als Text ausgegeben

document.Person.auswahl.options[3].text

4.      Eigenschaft value

Mit Hilfe der Eigenschaft Value kann der Wert eines Eintrags verändert werden