File: formularbuttons.htm

package info (click to toggle)
selfhtml 8.0-5
  • links: PTS
  • area: non-free
  • in suites: sarge
  • size: 32,684 kB
  • ctags: 3,788
  • sloc: xml: 605; java: 376; makefile: 57
file content (222 lines) | stat: -rw-r--r-- 15,523 bytes parent folder | download 
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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Formulare / Buttons zum Absenden oder Abbrechen</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description"    content="Wie Sie in HTML-Formularen Buttons zum Absenden des Formulars oder zum Zur&uuml;cksetzen aller Eingaben definieren.">
<meta name="keywords"       content="SELFHTML, HTML, XHTML, Formulare, Absenden, Abbrechen, Absende-Button, Abbrechen-Button, Submit, Reset, Submit-Button, Reset-Button, &lt;input&gt;, type=">
<meta name="author"         content="Stefan M&uuml;nz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher"   content="selfhtml@teamone.de">
<meta name="DC.Date"        content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier"  content="http://selfhtml.teamone.de/html/formulare/formularbuttons.htm">
<meta name="DC.Language"    content="de">
<meta name="DC.Rights"      content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version"   content="1">
<meta name="SELF.Pagetype"  content="Information">
<meta name="SELF.Path"      content="SELFHTML == ../../index.htm // HTML == ../index.htm // Formulare == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">

<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Formulare</b></a></td>
</tr></table>

<table cellpadding="4" cellspacing="0" border="0" width="100%">

<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Buttons zum Absenden oder Abbrechen</h2></td>
</tr>

<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>

<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten">&nbsp;<a href="#herkoemmlich"><b>Buttons zum Absenden oder Abbrechen definieren (herk&ouml;mmlich)</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten">&nbsp;<a href="#grafische"><b>Grafische Buttons zum Absenden definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten">&nbsp;<a href="#modern"><b>Buttons zum Absenden oder Abbrechen definieren (modern)</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten">&nbsp;<a href="#weitere_infos"><b>Weitere Informationen</b></a><br>
</p>
</td>
</tr>

<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">&#160;<a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>&nbsp;</td></tr>
</table>




<h2 class="Sh2"><img src="../../src/html20.gif" width="30" height="30" border="0" alt="HTML 2.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie1.gif" width="30" height="30" border="0" alt="MSIE 1.0"><img src="../../src/netsc1.gif" width="30" height="30" border="0" alt="Netscape 1.0">&nbsp;<a class="an" name="herkoemmlich">Buttons zum Absenden oder Abbrechen definieren (herk&ouml;mmlich)</a></h2>

<p>Zwei Standard-Buttons stellt HTML zur Verf&uuml;gung, um Formulareingaben zu handhaben: einen Button zum &quot;Absenden&quot; und einen zum &quot;Abbrechen&quot;. Mit dem Absende-Button kann der Anwender das ausgef&uuml;llte Formular losschicken. Mit den Formulardaten geschieht dann das, was im einleitenden <code>&lt;form&gt;</code>-Tag bei <code>action=</code> festgelegt wurde (siehe hierzu <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite">&nbsp;<a href="definieren.htm"><b>Formular definieren</b></a>). Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt, Eingaben werden gel&ouml;scht.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite">&nbsp;<a href="anzeige/input_submit_reset.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>

<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
       &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Text des Titels&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Das hier k&amp;ouml;nnen Sie absenden!&lt;/h1&gt;

&lt;p&gt;Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.&lt;/p&gt;

&lt;form action=&quot;http://selfhtml.teamone.de/cgi-bin/comments.pl&quot;&gt;
&lt;table border=&quot;0&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; bgcolor=&quot;#E0E0E0&quot;&gt;
 &lt;tr&gt;
  &lt;td align=&quot;right&quot;&gt;Vorname:&lt;/td&gt;
  &lt;td&gt;&lt;input name=&quot;Vorname&quot; type=&quot;text&quot; size=&quot;30&quot; maxlength=&quot;30&quot;&gt;&lt;/td&gt;
 &lt;/tr&gt;&lt;tr&gt;
  &lt;td align=&quot;right&quot;&gt;Zuname:&lt;/td&gt;
  &lt;td&gt;&lt;input name=&quot;Zuname&quot; type=&quot;text&quot; size=&quot;30&quot; maxlength=&quot;40&quot;&gt;&lt;/td&gt;
 &lt;/tr&gt;&lt;tr&gt;
  &lt;td align=&quot;right&quot; valign=&quot;top&quot;&gt;Kommentar:&lt;/td&gt;
  &lt;td&gt;&lt;textarea name=&quot;Text&quot; rows=&quot;10&quot; cols=&quot;50&quot;&gt;&lt;/textarea&gt;&lt;/td&gt;
 &lt;/tr&gt;&lt;tr&gt;
  &lt;td align=&quot;right&quot;&gt;Formular:&lt;/td&gt;
  &lt;td&gt;
   &lt;input type=&quot;submit&quot; value=&quot; Absenden &quot;&gt;
   &lt;input type=&quot;reset&quot; value=&quot; Abbrechen&quot;&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre></td></tr></table>

<h3 class="xpl">Erl&auml;uterung:</h3>

<p>Mit <code>&lt;input type=&quot;submit&quot;&gt;</code> definieren Sie einen Absende-Button (<i>input = Eingabe, submit = best&auml;tigen</i>). Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden <code>&lt;form&gt;</code>-Tag beim Attribut <code>action=</code> angegeben ist.<br>
Mit <code>&lt;input type=&quot;reset&quot;&gt;</code> definieren Sie einen Abbrechen-Button (<i>reset = zur&uuml;cksetzen</i>). Eingegebene Daten werden verworfen und nicht abgeschickt.</p>

<p>Mit dem Attribut <code>value=</code> bestimmen Sie die Beschriftung der Buttons (<i>value = Wert</i>).</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Mit Hilfe von <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel">&nbsp;<a href="../../javascript/index.htm"><b>JavaScript</b></a> k&ouml;nnen Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. Innerhalb dieser Dokumentation finden Sie ein Anwendungsbeispiel <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite">&nbsp;<a href="../../javascript/beispiele/formulareingaben.htm"><b>Formulareingaben &uuml;berpr&uuml;fen</b></a>.</p>



<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
&#160;<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>&nbsp;
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc3.gif" width="30" height="30" border="0" alt="Netscape 3.0">&nbsp;<a class="an" name="grafische">Grafische Buttons zum Absenden definieren</a></h2>

<p>Sie k&ouml;nnen innerhalb von Formularen Grafiken referenzieren und diese als Absende-Button definieren. Solche grafische Buttons k&ouml;nnen Sie als Alternative zu Buttons vom Typ <code>&lt;input type=&quot;submit&quot;&gt;</code> verwenden.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite">&nbsp;<a href="anzeige/input_image.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>

<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
       &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Text des Titels&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Absenden mit Komfort!&lt;/h1&gt;

&lt;p&gt;Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.&lt;/p&gt;

&lt;form action=&quot;http://selfhtml.teamone.de/cgi-bin/comments.pl&quot;&gt;
&lt;table border=&quot;0&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; bgcolor=&quot;#E0E0E0&quot;&gt;
 &lt;tr&gt;
  &lt;td align=&quot;right&quot;&gt;Ihre Mailadresse:&lt;/td&gt;
  &lt;td&gt;&lt;input name=&quot;Mail&quot; type=&quot;text&quot; size=&quot;30&quot; maxlength=&quot;30&quot;&gt;&lt;/td&gt;
 &lt;/tr&gt;&lt;tr&gt;
  &lt;td align=&quot;right&quot;&gt;Formular:&lt;/td&gt;
  &lt;td&gt;
   &lt;input type=&quot;image&quot; src=&quot;absende.gif&quot;&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre></td></tr></table>

<h3 class="xpl">Erl&auml;uterung:</h3>

<p>Mit <code>&lt;input type=&quot;image&quot;&gt;</code> definieren Sie einen grafischen Button (<i>input = Eingabe</i>). Die gew&uuml;nschte Grafikdatei bestimmen Sie mit dem Attribut <code>src=</code> (<i>src = source = Quelle</i>). Weisen Sie eine geeignete Grafik vom Typ GIF, JPEG oder PNG zu. Im obigen Beispiel wird vorausgesetzt, dass sich die Grafik <code>absende.gif</code> im gleichen Verzeichnis befindet wie die HTML-Datei mit dem Formular. F&uuml;r das Adressieren der Grafik gelten die Regeln zum <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite">&nbsp;<a href="../allgemein/referenzieren.htm"><b>Referenzieren in HTML</b></a></p>







<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
&#160;<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>&nbsp;
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie4.gif" width="30" height="30" border="0" alt="MSIE 4.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0">&nbsp;<a class="an" name="modern">Buttons zum Absenden oder Abbrechen definieren (modern)</a></h2>

<p>Dies funktioniert genauso wie das Definieren von <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite">&nbsp;<a href="klickbuttons.htm#modern"><b>Klick-Buttons (modern)</b></a>. Dort wird erkl&auml;rt, wie solche Buttons definiert werden.</p>

<p>Um einen Button zum Absende-Button (Submit-Button) zu erkl&auml;ren, m&uuml;ssen Sie im einleitenden <code>&lt;button&gt;</code>-Tag <code>type=&quot;submit&quot;</code> notieren. Um den Button zu einem Abbrechen-Button (Reset-Button) zu erkl&auml;ren, m&uuml;ssen Sie <code>type=&quot;reset&quot;</code> notieren.</p>







<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
&#160;<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>&nbsp;
</td></tr></table>
<h2 class="Sh2"><a class="an" name="weitere_infos">Weitere Informationen</a></h2>

<p>In der <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel">&nbsp;<a href="../referenz/index.htm"><b>HTML-Referenz</b></a> finden Sie Angaben dar&uuml;ber, wo das hier beschriebene Formularelement vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite">&nbsp;<a href="../referenz/elemente.htm#input"><b>Element-Referenz</b></a> f&uuml;r Input-Formularelemente (<code>&lt;input&gt;</code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite">&nbsp;<a href="../referenz/attribute.htm#input"><b>Attribut-Referenz</b></a> f&uuml;r Input-Formularelemente (<code>&lt;input&gt;</code>)</p>



<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
&#160;<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>

<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="formatieren.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="formatieren.htm"><b>Formulare mit CSS formatieren</b></a>
</td></tr>

<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="tastatur.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zur&uuml;ck"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="tastatur.htm"><b>Tabulator-Reihenfolge, Tastaturk&uuml;rzel und Ausgrauen</b></a>
</td>

</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">&nbsp;</td></tr>
</table>

<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Formulare</b></a></td>
</tr></table>

<p>&copy; 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail">&nbsp;<a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>

</body>
</html>