SELFHTML

forms

Informationsseite

nach unten forms: Allgemeines zur Verwendung

Eigenschaften:

nach unten action (Empfängeradresse bei Absenden)
nach unten encoding (Kodierungstyp)
nach unten length (Anzahl Formulare in Datei)
nach unten method (Übertragungsmethode)
nach unten name (Formularname)
nach unten target (Zielfenster für CGI-Antworten)

Methoden:

nach unten handleEvent() (Ereignis verarbeiten)
nach unten reset() (Formulareingaben löschen)
nach unten submit() (Formular abschicken)

Unterobjekte:

Seite elements

 nach unten 

forms: Allgemeines zur Verwendung

Mit dem Objekt forms, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf Formulare, die in einer HTML-Datei definiert sind.

Es stehen folgende Arten zur Verfügung, mit JavaScript ein bestimmtes Formular anzusprechen:

Schema 1 / Beispiel 1:

document.forms[#].Eigenschaft
document.forms[#].Methode()

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

Schema 2 / Beispiel 2:

document.Formularname.Eigenschaft
document.Formularname.Methode()

Ziel = document.Testformular.action;
document.Testformular.reset();

Schema 3 / Beispiel 3:

document.forms.Formularname.Eigenschaft
document.forms.Formularname.Methode

Ziel = document.forms.Testformular.action;
document.forms.Testformular.reset();

Schema 4 / Beispiel 4:

document.forms["Formularname"].Eigenschaft
document.forms["Formularname"].Methode

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

Erläuterung:

Formulare können Sie auf vier Arten ansprechen:

  1. mit einer Indexnummer (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 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.
  2. mit dem Namen des Formulars direkt über das document-Objekt wie in Schema 2 / Beispiel 2)
    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.
  3. mit dem Namen des Formulars über das document.forms-Objekt (wie in Schema 3 / Beispiel 3)
    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.
  4. mit dem Namen des Formulars als Indexnamen (wie in Schema 4 / Beispiel 4)
    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 Seite elements-Objekts mit seinen Unterobjekten zur Verfügung.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern action

Speichert die Wert, die bei der Definition des Formulars im Attribut action steht, also etwa die Adresse eines Server-Programms, das die Formulardaten verarbeitet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Bestaetigung () {
  var x = window.confirm("Dieses Formular geht an " + document.Testform.action);
  return x;
}
</script>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org"
onsubmit="return Bestaetigung()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Bestaetigung() aufgerufen, weil im einleitenden <form>-Tag der Seite Event-Handler onsubmit notiert ist. Dieser ermittelt den Rückgabewert der Funktion Bestaetigung(). Ist der Rückgabewert true, wird das Formular abgeschickt, ist er false, wird es nicht abgeschickt.

Innerhalb der Funktion Bestaetigung() erhält der Anwender mit der Seite confirm-Methode ein Dialogfenster, in dem ihm der Wert der Formularangabe action angezeigt wird. Confirm-Fenster haben stets zwei Buttons, einen zum Bestätigen und einen zum Abrechen. Der Button zum Bestätigen gibt bei Anklicken true zurück, der Abbrechen-Button false. Der Rückgabewert wird im Beispiel in der Variablen x gespeichert. Diese wird wiederum von der Funktion Bestaetigung() selbst zurückgegeben, denn der aufrufende Event-Handler erwartet ja einen solchen Rückgabewert.

Beachten Sie:

Die Verwendung von mailto: als Zieladresse eines Formulares verursacht häufig Probleme. Mehr dazu im Abschnitt Seite Formulare als E-Mail.

Sie können als Zieladresse eines Formulares auch eine HTML-Datei angeben und Formulardaten mittels JavaScript verarbeiten. Berücksichtigen Sie dabei, dass JavaScript nur dann Zugriff auf Daten hat, wenn die Methode get verwendet wurde.
Opera 5.12 zeigt im Protokoll file den Quelltext der Zieldatei an.

nach obennach unten

JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern encoding

Speichert den Wert, der bei der Definition des Formulars im Attribut enctype steht, also zum Beispiel "text/plain".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CodeTyp () {
  if (document.Testform.action.indexOf("@") > 0) {
    document.Testform.encoding = "text/plain";
  } else {
    document.Testform.encoding = "application/x-www-form-urlencoded";
  }
  return true;
}
</script>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org"
onsubmit="return CodeTyp()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion CodeTyp() aufgerufen.

Innerhalb der Funktion CodeTyp() wird ermittelt, ob in der action-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrät. Wenn ja, wird der Kodierungstyp auf text/plain gesetzt, ansonsten auf den für CGI-Programme üblichen Kodiertyp application/x-www-form-urlencoded. Die Funktion CodeTyp() gibt true zurück, denn der aufrufende Event-Handler onsubmit im einleitenden <form>-Tag erwartet einen solchen Rückgabewert. Das Formular wird nur abgeschickt, wenn der Rückgabewert true ist.

Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode indexOf(), lesen Sie den Abschnitt über das Seite string-Objekt.

Beachten Sie:

Die Verwendung von mailto: als Zieladresse eines Formulares verursacht häufig Probleme. Mehr dazu im Abschnitt Seite Formulare als E-Mail.

Im HTML-spezifischen DOM ist der Zugriff auf das enctype-Attribut über die gleichnamige enctype-Eigenschaft definiert, nicht über eine Eigenschaft namens encoding.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen length

Speichert die Anzahl der Formulare, die in einer Datei definiert sind.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org">
<input type="hidden" value="Guildo">
<input type="submit" value="Guildo">
</form>
<form name="Testform" action="mailto:beispiel@example.org">
<input type="hidden" value="Heino">
<input type="submit" value="Heino">
</form>
<script type="text/javascript">
document.write(document.forms.length + " Formulare");
</script>
</body></html>

Erläuterung:

Im Beispiel werden zwei kleine Formulare definiert. Am Ende wird mit Hilfe von Seite document.write() zum Testen in die Datei geschrieben, wie viele Formulare darin definiert sind.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern method

Speichert den Wert, der bei der Definition des Formulars im Attribut method steht, normalerweise "get" oder "post".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Methode () {
  if (document.Testform.action.indexOf("@") > 0) {
    document.Testform.method = "post";
  } else {
    document.Testform.method = "get";
  }
  return true;
}
</script>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org"
onsubmit="return Methode()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Methode() aufgerufen.

Innerhalb der Funktion Methode() wird ermittelt, ob in der action-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrät. Wenn ja, wird die Versandmethode auf post gesetzt, ansonsten auf get. Die Funktion Methode() gibt true zurück, denn der aufrufende Event-Handler onsubmit im einleitenden <form>-Tag erwartet einen solchen Rückgabewert. Das Formular wird nur abgeschickt, wenn der Rückgabewert true ist.

Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode indexOf(), lesen Sie den Abschnitt über das Seite string-Objekt.

Beachten Sie:

Die Verwendung von mailto: als Zieladresse eines Formulares verursacht häufig Probleme. Lesen Sie hierzu den Abschnitt Seite Formulare als E-Mail.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern name

Speichert den Namen eines Formulars.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
<script type="text/javascript">
document.Testform.Eingabe.value = document.Testform.name;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld. Unterhalb des Formulars steht ein Script, das in das Eingabefeld zur Kontrolle den Namen des Formulars schreibt. Im Beispiel ist das der Name Testform.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern target

Speichert, welches Fenster im Falle eines Frame-Sets nach dem Absenden aktiv werden soll. Das kann etwa bei Frame-Fenstern oder bei separaten Zweitfenstern interessant sein. Falls ein CGI-Programm HTML-Code an den Browser zurückschickt, zum Beispiel mit einem "Danke für das Absenden des Formulars", dann erscheint die Ausgabe in dem Fenster mit dem angegebenen Namen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ziel () {
  document.Testform.target = "unten";
  return true;
}
</script>
</head><body>
<form name="Testform" action="datei.htm"
onsubmit="return Ziel()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel nimmt an, dass sich die Datei mit dem Formular in einem Frame-Set befindet, in dem es noch ein anderes Frame-Fenster gibt, und zwar eines mit dem Namen unten. Die Beispieldatei enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Ziel() aufgerufen.

Innerhalb der Funktion Ziel() wird bestimmt, dass die HTML-Ausgabe das action-Ziels im Frame-Fenster unten erfolgt.

nach obennach unten

JavaScript 1.2Netscape 4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie Seite handleEvent() beim window-Objekt (nähere Informationen siehe dort).

nach obennach unten

DOM 1.0JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 reset()

Löscht alle Eingaben in einem Formular und hat die gleiche Wirkung wie ein Button, der in HTML mit type="reset" definiert wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="text" size="40" name="Feld1"><br>
<input type="text" size="40" name="Feld2"><br>
</form>
<a href="javascript:document.Testform.reset()">Formular leeren</a>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Eingabefeldern. Unterhalb des Formulars steht ein Verweis. Beim Anklicken des Verweises werden alle Eingaben in dem Formular gelöscht.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 submit()

Sendet ein Formular ab und hat die gleiche Wirkung wie ein Button, der in HTML mit type="submit" definiert wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="/cgi-bin/auswert.pl" method="get">
<input type="text" size="40" name="Feld1"><br>
<input type="text" size="40" name="Feld2"><br>
</form>
<script type="text/javascript">
function AbGehts () {
  document.Testform.submit();
}

window.setTimeout("AbGehts()", 60000);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit Eingabefeldern. Unterhalb davon steht ein JavaScript. Darin wird mit der Seite setTimeout()-Methode ein Countdown gestartet. Nach 60000 Millisekunden, also nach einer Minute, wird die Funktion AbGehts() aufgerufen. Diese schickt das Formular mit submit() ab.

Erläuterung:

Die JavaScript-Methode funktioniert seit Netscape 3.0 jedoch nur noch, wenn das Formular von einem Programm weiterverarbeitet wird, d.h. wenn im einleitenden <form>-Tag im Attribut action zum Beispiel die Adresse eines CGI-Programm angegeben wurde. Wenn im action-Attribut eine E-Mail-Adresse oder eine Newsgroup angegeben wird, funktioniert sie nicht.

Beachten Sie:

Der Aufruf der Methode submit() funktioniert nicht mehr, wenn es im Formular ein Element (z.B. einen Absende-Button) gibt, welches ebenfalls den Namen submit besitzt. Gleiches gilt für alle anderen Überschneidungen von Methodennamen und Elementnamen. Der Grund ist, dass das Formularelement über document.Formularname.Elementname angesprochen werden kann, also in diesem Fall document.Formularname.submit, und dadurch die Methode submit() überschrieben wird.

 nach oben
weiter Seite elements
zurück Seite applets
 

© 2007 Seite Impressum Flattr this