blob: 3c0d1ade95d3f3ca26a2ca8a1009b69520792252 (
plain)
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
|
---
title: HTMLFormElement
slug: Web/API/HTMLFormElement
tags:
- DOM
- Dokumentacja_Gecko_DOM
- Gecko
- Wszystkie_kategorie
translation_of: Web/API/HTMLFormElement
---
<p>{{ ApiRef() }}</p>
<h3 id="Interfejs_elementu_HTML_FORM" name="Interfejs_elementu_HTML_FORM">Interfejs elementu HTML FORM</h3>
<p>Elementy <code>FORM</code> mają wszystkie właściwości i metody innych elementów HTML, tak jak opisano w rozdziale o <a href="pl/DOM/element">elementach</a>. Jednocześnie mają one bardziej wyspecjalizowany interfejs <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">HTMLFormElement</a>.</p>
<p>Interfejs ten dostarcza metod do tworzenia i modyfikacji elementów <code>FORM</code> przy użyciu DOM. Poniższy przykład przedstawia, jak utworzyć nowy formularz, zmienić jego atrybuty i wysłać go.</p>
<pre>// Utwórz formularz
var f = document.createElement("form");
// Dodaj do zawartości dokumentu
document.body.appendChild(f);
// Ustaw atrybuty oznaczające akcję i metodę wysyłania
f.action = "/cgi-bin/some.cgi";
f.method = "POST"
// Wyślij formularz
f.submit();
</pre>
<p>Z kolei poniższy dokument HTML przedstawia jak wydobyć informacje z formularza i nadać mu pewne atrybuty.</p>
<pre><title>Przykład formularza</title>
<script type="text/javascript">
function getFormInfo() {
var info;
// Znajdź referencję do formularza poprzez kolekcję forms
var f = document.forms["formA"];
info = "f.elements: " + f.elements + "\n"
+ "f.length: " + f.length + "\n"
+ "f.name: " + f.elements + "\n"
+ "f.acceptCharset: " + f.acceptCharset + "\n"
+ "f.action: " + f.action + "\n"
+ "f.enctype: " + f.enctype + "\n"
+ "f.encoding: " + f.encoding + "\n"
+ "f.method: " + f.method + "\n"
+ "f.target: " + f.target;
document.forms["formA"].elements['tex'].value = info;
}
// Referencja do formularza jest przekazywana z atrybutu
// onclick przycisku za pomocą 'this.form'
function setFormInfo(f) {
f.method = "GET";
f.action = "/cgi-bin/evil_executable.cgi";
f.name = "totally_new";
}
</script>
<h1>Przykład formularza</h1>
<form name="formA" id="formA"
action="/cgi-bin/test" method="POST">
<p>Kliknij "info" by zobaczyć informację o formularzu,
"zmień" by zmienić ustawienia, a następnie ponownie "info"
by zobaczyć efekt zmian.</p>
<p>
<input type="button" value="info"
onclick="getFormInfo();">
<input type="button" value="zmień"
onclick="setFormInfo(this.form);">
<input type="reset" value="zresetuj">
<br>
<textarea id="tex" style="height:15em; width:20em">
</p>
</form>
</pre>
<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3>
<dl>
<dt><a href="pl/DOM/form.elements">form.elements</a></dt>
<dd>Zwraca kolekcję wszystkich kontrolek zawartych w elemencie <code>FORM</code>.</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.length">form.length</a></dt>
<dd>Zwraca ilość kontrolek w elemencie <code>FORM</code>.</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.name">form.name</a></dt>
<dd>Zwraca ciąg z nazwą bieżącego elementu <code>FORM</code>.</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.acceptCharset">form.acceptCharset</a></dt>
<dd>Zwraca listę obsługiwanych przez formularz zestawów znaków.</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.action">form.action</a></dt>
<dd>Pobiera/ustawia akcję dla elementu <code>FORM</code>.</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.enctype">form.enctype</a></dt>
<dd>Pobiera/ustawia typ zawartości wysyłanej przez formularz.</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.encoding">form.encoding</a></dt>
<dd>Pobiera/ustawia typ zawartości wysyłanej przez formularz.</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.method">form.method</a></dt>
<dd>Pobiera/ustawia metodę HTTP używaną do wysłania formularza.</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.target">form.target</a></dt>
<dd>Pobiera/ustawia okno docelowe akcji formularza (np. ramka, w której zostanie wyrenderowana zwrócona strona).</dd>
</dl>
<h3 id="Metody" name="Metody">Metody</h3>
<dl>
<dt><a href="pl/DOM/form.submit">form.submit</a></dt>
<dd>Wysyła formularz</dd>
</dl>
<dl>
<dt><a href="pl/DOM/form.reset">form.reset</a></dt>
<dd>Przywraca formularz do jego stanu początkowego</dd>
</dl>
<div class="noinclude"> </div>
<p>{{ languages( { "en": "en/DOM/form", "es": "es/DOM/form", "fr": "fr/DOM/form", "ja": "ja/DOM/form" } ) }}</p>
|
