1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Objektreferenz / forms</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Welche Aufgaben, Eigenschaften und Methoden das forms-Objekt in JavaScript hat.">
<meta name="keywords" content="SELFHTML, JavaScript, Objekte, forms, action, encoding, length, method, name, target, handleEvent, reset, submit">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots" content="noindex, nofollow">
<meta name="DC.Publisher" content="SELFHTML e. V.">
<meta name="DC.Date" content="2005-10-03T08:55:27+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/objekte/forms.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Objektreferenz" href="index.htm">
<link rel="next" title="elements" href="elements.htm">
<link rel="prev" title="applets" href="applets.htm">
<link rel="first" title="Hinweise zur JavaScript-Objektreferenz" href="hinweise.htm">
<link rel="last" title="Objektunabhngige Funktionen" href="unabhaengig.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Objektreferenz</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">forms</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p><img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#allgemeines">forms: Allgemeines zur Verwendung</a></p>
<h3>Eigenschaften:</h3>
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#action">action</a> (Empfngeradresse bei Absenden)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#encoding">encoding</a> (Kodierungstyp)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#length">length</a> (Anzahl Formulare in Datei)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#method">method</a> (bertragungsmethode)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#name">name</a> (Formularname)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#target">target</a> (Zielfenster fr CGI-Antworten)<br>
</p>
<h3>Methoden:</h3>
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#handle_event">handleEvent()</a> (Ereignis verarbeiten)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#reset">reset()</a> (Formulareingaben lschen)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#submit">submit()</a> (Formular abschicken)<br>
</p>
<h3>Unterobjekte:</h3>
<p>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="elements.htm">elements</a><br>
</p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="allgemeines">forms: Allgemeines zur Verwendung</a></h2>
<p>Mit dem Objekt <code>forms</code>, das in der JavaScript-Objekthierarchie unterhalb des <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="document.htm">document</a>-Objekts liegt, haben Sie Zugriff auf Formulare, die in einer HTML-Datei definiert sind.</p>
<p>Es stehen folgende Arten zur Verfgung, mit JavaScript ein bestimmtes Formular anzusprechen:</p>
<h3 class="xmp">Schema 1 / Beispiel 1:</h3>
<pre>
document.forms[#].Eigenschaft
document.forms[#].Methode()
Ziel = document.forms[0].action;
document.forms[0].reset();
</pre>
<h3 class="xmp">Schema 2 / Beispiel 2:</h3>
<pre>
document.Formularname.Eigenschaft
document.Formularname.Methode()
Ziel = document.Testformular.action;
document.Testformular.reset();
</pre>
<h3 class="xmp">Schema 3 / Beispiel 3:</h3>
<pre>
document.forms.Formularname.Eigenschaft
document.forms.Formularname.Methode
Ziel = document.forms.Testformular.action;
document.forms.Testformular.reset();
</pre>
<h3 class="xmp">Schema 4 / Beispiel 4:</h3>
<pre>
document.forms["Formularname"].Eigenschaft
document.forms["Formularname"].Methode
Ziel = document.forms["Testformular"].action;
document.forms["Testformular"].reset();
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Formulare knnen Sie auf vier Arten ansprechen:</p>
<ol>
<li>mit einer <b>Indexnummer</b> (wie in Schema 1 / Beispiel 1)<br>
Bei Verwendung von Indexnummern geben Sie <code>document.forms</code> an und dahinter in eckigen Klammern, das wievielte Formular in der Datei Sie meinen. Beachten Sie, dass der Zhler bei 0 beginnt, d.h. das erste Formular sprechen Sie mit <code>forms[0]</code> an, das zweite Formular mit <code>forms[1]</code> usw. Beim Zhlen gilt die Reihenfolge, in der die <code><form></code>-Tags in der Datei notiert sind. Sie knnen zwischen den eckigen Klammern auch eine Number-Variable notieren, die die Indexnummer enthlt.</li>
<li>mit dem <b>Namen des Formulars</b> direkt ber das <code>document</code>-Objekt wie in Schema 2 / Beispiel 2)<br>
Wie auch verschiedene andere Elemente mit <code>name</code>-Attributen knnen Sie Formulare mit Namen als Objekte direkt unterhalb des <code>document</code>-Objekts ansprechen. Dabei geben Sie mit <code>document.Formularname</code> den Namen an, den Sie bei der Definition des Formulars im einleitenden <code><form></code>-Tag im <code>name</code>-Attribut angegeben haben.</li>
<li>mit dem <b>Namen des Formulars</b> ber das <code>document.forms</code>-Objekt (wie in Schema 3 / Beispiel 3)<br>
Diese Methode ist gleichwertig zum Schema 2, das Formular liegt allerdings unter <code>document.forms</code>. Dieses Schema erlaubt verstndlicheren Code, denn es ist sofort ersichtlich, dass ein Formular angesprochen wird. Geben Sie mit <code>document.forms.Formularname</code> den Namen an, den Sie bei der Definition des Formulars im einleitenden <code><form></code>-Tag im Attribut <code>name</code> angegeben haben.</li>
<li>mit dem <b>Namen des Formulars als Indexnamen</b> (wie in Schema 4 / Beispiel 4)<br>
Diese Art ist eine zu Schema 3 quivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten ber <code>objekt.unterobjekt</code> gleichwertig zu <code>objekt["unterobjekt"]</code>. Notieren Sie wie beim Ansprechen mit Indexnummer (Schema 1) hinter <code>document.forms</code> eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anfhrungszeichen den Namen, den Sie bei der Definition des Formulars im einleitenden <code><form></code>-Tag im Attribut <code>name</code> angegeben haben. Diese Schreibweise hat den Vorteil, dass Sie zwischen den eckigen Klammern auch eine String-Variable notieren knnen, die den Formularnamen enthlt.</li>
</ol>
<p>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 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="elements.htm">elements</a>-Objekts mit seinen Unterobjekten zur Verfgung.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/dom10.gif" width="30" height="30" alt="DOM 1.0" title="DOM 1.0"><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern"> <a class="an" name="action">action</a></h2>
<p>Speichert die Wert, die bei der Definition des Formulars im Attribut <code>action</code> steht, also etwa die Adresse eines Server-Programms, das die Formulardaten verarbeitet.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/forms_action.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion <code>Bestaetigung()</code> aufgerufen, weil im einleitenden <code><form></code>-Tag der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/eventhandler.htm">Event-Handler</a> <code>onsubmit</code> notiert ist. Dieser ermittelt den Rckgabewert der Funktion <code>Bestaetigung()</code>. Ist der Rckgabewert <code>true</code>, wird das Formular abgeschickt, ist er <code>false</code>, wird es nicht abgeschickt.</p>
<p>Innerhalb der Funktion <code>Bestaetigung()</code> erhlt der Anwender mit der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="window.htm#confirm">confirm</a>-Methode ein Dialogfenster, in dem ihm der Wert der Formularangabe <code>action</code> angezeigt wird. Confirm-Fenster haben stets zwei Buttons, einen zum Besttigen und einen zum Abrechen. Der Button zum Besttigen gibt bei Anklicken <code>true</code> zurck, der Abbrechen-Button <code>false</code>. Der Rckgabewert wird im Beispiel in der Variablen <code>x</code> gespeichert. Diese wird wiederum von der Funktion <code>Bestaetigung()</code> selbst zurckgegeben, denn der aufrufende Event-Handler erwartet ja einen solchen Rckgabewert.</p>
<h3 class="info">Beachten Sie:</h3>
<p>Die Verwendung von <code>mailto:</code> als Zieladresse eines Formulares verursacht hufig Probleme. Mehr dazu im Abschnitt <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../html/formulare/verarbeiten.htm#email">Formulare als E-Mail</a>.</p>
<p>Sie knnen als Zieladresse eines Formulares auch eine HTML-Datei angeben und Formulardaten mittels JavaScript verarbeiten. Bercksichtigen Sie dabei, dass JavaScript nur dann Zugriff auf Daten hat, wenn die Methode <code>get</code> verwendet wurde.<br>
Opera 5.12 zeigt im Protokoll <code>file</code> den Quelltext der Zieldatei an.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern"> <a class="an" name="encoding">encoding</a></h2>
<p>Speichert den Wert, der bei der Definition des Formulars im Attribut <code>enctype</code> steht, also zum Beispiel "text/plain".</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/forms_encoding.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion <code>CodeTyp()</code> aufgerufen.</p>
<p>Innerhalb der Funktion <code>CodeTyp()</code> wird ermittelt, ob in der <code>action</code>-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrt. Wenn ja, wird der Kodierungstyp auf <code>text/plain</code> gesetzt, ansonsten auf den fr CGI-Programme blichen Kodiertyp <code>application/x-www-form-urlencoded</code>.
Die Funktion <code>CodeTyp()</code> gibt <code>true</code> zurck, denn der aufrufende Event-Handler <code>onsubmit</code> im einleitenden <code><form></code>-Tag erwartet einen solchen Rckgabewert. Das Formular wird nur abgeschickt, wenn der Rckgabewert <code>true</code> ist.</p>
<p>Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode <code>indexOf()</code>, lesen Sie den Abschnitt ber das <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="string.htm">string</a>-Objekt.</p>
<h3 class="info">Beachten Sie:</h3>
<p>Die Verwendung von <code>mailto:</code> als Zieladresse eines Formulares verursacht hufig Probleme. Mehr dazu im Abschnitt <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../html/formulare/verarbeiten.htm#email">Formulare als E-Mail</a>.</p>
<p>Im HTML-spezifischen DOM ist der Zugriff auf das <code>enctype</code>-Attribut ber die gleichnamige <code>enctype</code>-Eigenschaft definiert, nicht ber eine Eigenschaft namens <code>encoding</code>.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/dom10.gif" width="30" height="30" alt="DOM 1.0" title="DOM 1.0"><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen"> <a class="an" name="length">length</a></h2>
<p>Speichert die Anzahl der Formulare, die in einer Datei definiert sind.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/forms_length.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel werden zwei kleine Formulare definiert. Am Ende wird mit Hilfe von <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="document.htm">document</a>.<a href="document.htm#write">write()</a> zum Testen in die Datei geschrieben, wie viele Formulare darin definiert sind.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/dom10.gif" width="30" height="30" alt="DOM 1.0" title="DOM 1.0"><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern"> <a class="an" name="method">method</a></h2>
<p>Speichert den Wert, der bei der Definition des Formulars im Attribut <code>method</code> steht, normalerweise "get" oder "post".</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/forms_method.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion <code>Methode()</code> aufgerufen.</p>
<p>Innerhalb der Funktion <code>Methode()</code> wird ermittelt, ob in der <code>action</code>-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrt. Wenn ja, wird die Versandmethode auf <code>post</code> gesetzt, ansonsten auf <code>get</code>.
Die Funktion <code>Methode()</code> gibt <code>true</code> zurck, denn der aufrufende Event-Handler <code>onsubmit</code> im einleitenden <code><form></code>-Tag erwartet einen solchen Rckgabewert. Das Formular wird nur abgeschickt, wenn der Rckgabewert <code>true</code> ist.</p>
<p>Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode <code>indexOf()</code>, lesen Sie den Abschnitt ber das <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="string.htm">string</a>-Objekt.</p>
<h3 class="info">Beachten Sie:</h3>
<p>Die Verwendung von <code>mailto:</code> als Zieladresse eines Formulares verursacht hufig Probleme. Lesen Sie hierzu den Abschnitt <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../html/formulare/verarbeiten.htm#email">Formulare als E-Mail</a>.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/dom10.gif" width="30" height="30" alt="DOM 1.0" title="DOM 1.0"><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern"> <a class="an" name="name">name</a></h2>
<p>Speichert den Namen eines Formulars.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/forms_name.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt 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 <code>Testform</code>.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/dom10.gif" width="30" height="30" alt="DOM 1.0" title="DOM 1.0"><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern"> <a class="an" name="target">target</a></h2>
<p>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 zurckschickt, zum Beispiel mit einem "Danke fr das Absenden des Formulars", dann erscheint die Ausgabe in dem Fenster mit dem angegebenen Namen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/bsp_frame_target_forms.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>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 <code>unten</code>. Die Beispieldatei enthlt ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion <code>Ziel()</code> aufgerufen.</p>
<p>Innerhalb der Funktion <code>Ziel()</code> wird bestimmt, dass die HTML-Ausgabe das <code>action</code>-Ziels im Frame-Fenster <code>unten</code> erfolgt.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"> <a class="an" name="handle_event">handleEvent()</a></h2>
<p>bergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="window.htm#handle_event">handleEvent() beim window-Objekt</a> (nhere Informationen siehe dort).</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/dom10.gif" width="30" height="30" alt="DOM 1.0" title="DOM 1.0"><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="reset">reset()</a></h2>
<p>Lscht alle Eingaben in einem Formular und hat die gleiche Wirkung wie ein Button, der in HTML mit <code>type="reset"</code> definiert wurde.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/forms_reset.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt ein Formular mit zwei Eingabefeldern. Unterhalb des Formulars steht ein Verweis. Beim Anklicken des Verweises werden alle Eingaben in dem Formular gelscht.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/dom10.gif" width="30" height="30" alt="DOM 1.0" title="DOM 1.0"><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="submit">submit()</a></h2>
<p>Sendet ein Formular ab und hat die gleiche Wirkung wie ein Button, der in HTML mit <code>type="submit"</code> definiert wurde.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/forms_submit.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt ein Formular mit Eingabefeldern. Unterhalb davon steht ein JavaScript. Darin wird mit der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="window.htm#set_timeout">setTimeout()</a>-Methode ein Countdown gestartet. Nach 60000 Millisekunden, also nach einer Minute, wird die Funktion <code>AbGehts()</code> aufgerufen. Diese schickt das Formular mit <code>submit()</code> ab.</p>
<h3 class="xpl">Erluterung:</h3>
<p>Die JavaScript-Methode funktioniert seit Netscape 3.0 jedoch nur noch, wenn das Formular von einem Programm weiterverarbeitet wird, d.h. wenn im einleitenden <code><form></code>-Tag im Attribut <code>action</code> zum Beispiel die Adresse eines CGI-Programm angegeben wurde. Wenn im <code>action</code>-Attribut eine E-Mail-Adresse oder eine Newsgroup angegeben wird, funktioniert sie nicht.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Der Aufruf der Methode <code>submit()</code> funktioniert nicht mehr, wenn es im Formular ein Element (z.B. einen Absende-Button) gibt, welches ebenfalls den Namen <var>submit</var> besitzt. Gleiches gilt fr alle anderen berschneidungen von Methodennamen und Elementnamen. Der Grund ist, dass das Formularelement ber <code>document.Formularname.Elementname</code> angesprochen werden kann, also in diesem Fall <code>document.Formularname.submit</code>, und dadurch die Methode <code>submit()</code> berschrieben wird.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="elements.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="elements.htm">elements</a>
</td></tr>
<tr>
<td class="doc"><a href="applets.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="applets.htm">applets</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Objektreferenz</a></td>
</tr>
</table>
<p>© 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
