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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Formulare / Eingabefelder und Eingabebereiche</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie in HTML-Formularen einzeilige und mehrzeilige Eingabefelder und Eingabebereiche definieren, in denen Anwender Text eingeben kann.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Formulare, Eingabefelder, Eingabebereiche, einzeilige Eingabefelder, mehrzeilige Eingabefelder, Textareas, Input-Felder, Texteingabefelder, <input>, <textarea>, type=, size=, name=, maxlength=, cols=, rows=, wrap=">
<meta name="author" content="Stefan Mü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/eingabe.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>Eingabefelder und Eingabebereiche</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"> <a href="#felder"><b>Einzeilige Eingabefelder definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#felder_vorbelegung"><b>Textvorbelegung bei einzeiligen Eingabefeldern</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#felder_passwort"><b>Eingabefelder für Passwörter</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#bereiche"><b>Mehrzeilige Eingabebereiche definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#bereiche_vorbelegung"><b>Textvorbelegung bei mehrzeiligen Eingabebereichen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#bereiche_umbruch"><b>Zeilenumbruch bei mehrzeiligen Eingabebereichen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#nurlesen"><b>Eingabefelder und Eingabebereiche auf "nur lesen" setzen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere_infos"><b>Weitere Informationen</b></a><br>
</p>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </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"> <a class="an" name="felder">Einzeilige Eingabefelder definieren</a></h2>
<p>Einzeilige Eingabefelder dienen zur Aufnahme von einem oder wenigen Wörtern oder einer Zahl.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/input_text.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Formular f&uuml;r Namenseingabe</h1>
<form action="input_text.htm">
<p>Vorname:<br>
<input name="vorname" type="text" size="30" maxlength="30">
</p>
<p>Zuname:<br>
<input name="zuname" type="text" size="30" maxlength="40">
</p>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p><code><input></code> definiert ein einzeiliges Eingabefeld (<i>input = Eingabe</i>). Der Vollständigkeit halber sollten Sie die Angabe <code>type="text"</code> dazusetzen.</p>
<p>Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit der Angabe <code>name=</code>. Der vergebene Name wird bei CGI-Scripts benötigt, um auf die Daten des Eingabefeldes zugreifen zu können. Bei E-Mail-Formularen taucht der Name als Feldname auf. Und auch bei dem Formularfeldzugriff mit JavaScript ist der Name von Bedeutung. Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (<code>_</code>), den Bindestrich (<code>-</code>), den Doppelpunkt (<code>:</code>) oder den Punkt (<code>.</code>). Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern und den Unterstrich (<code>_</code>) enthalten. Groß- und Kleinschreibung werden bei den meisten Programmiersprachen ebenfalls unterschieden.</p>
<p>Ferner sollten Sie bei einzeiligen Eingabefeldern immer die Anzeigelänge in Zeichen mit <code>size=</code> sowie die interne Feldlänge in Zeichen <code>maxlength=</code> bestimmen. Beide Angaben bedeuten die Anzahl Zeichen (<i>size = Größe, maxlength = maximal length = maximale Länge</i>). Wenn die interne Feldlänge <code>maxlength=</code> größer ist als die angezeigte Feldlänge <code>size=</code> (wie im zweiten Eingabefeld des obigen Beispiels), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 31. eingegebenen Zeichen).</p>
<p>Um Beschriftung und Eingabefelder ordentlich zu positionieren, empfiehlt sich übrigens der Einsatz einer "blinden" <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../tabellen/index.htm"><b>Tabelle</b></a>.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/input_text_tabelle.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Formular f&uuml;r Namenseingabe</h1>
<form action="input_text_tabelle.htm">
<table border="0" cellpadding="0" cellspacing="4">
<tr>
<td align="right">Vorname:</td>
<td><input name="vorname" type="text" size="30" maxlength="30"></td>
</tr><tr>
<td align="right">Zuname:</td>
<td><input name="zuname" type="text" size="30" maxlength="40"></td>
</tr>
</table>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Das Beispiel zeigt das gleiche Formular wie im Beispiel weiter oben. Diesmal stehen jedoch Beschriftung und zugehöriges Formularfeld in je einer Tabellenzeile sauber nebeneinander. Die Beschriftungstexte werden dabei rechtsbündig ausgerichtet und erscheinen dadurch bündig zu den Eingabefeldern hin orientiert.</p>
<p>Wichtig ist, dass das <code>form</code>-Element außerhalb der Tabelle steht, oder andersherum, dass die Tabelle als Element innerhalb des Formulars notiert wird.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das <code><input></code>-Tag ist ein so genanntes Standalone-Tag. Wenn Sie <b>XHTML-konform</b> arbeiten, müssen Sie das <code>input</code>-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <code><input... /></code>.<br>
Weitere Informationen dazu im Kapitel <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../xhtml/index.htm"><b>XHTML und HTML</b></a>.</p>
<p>Mit Hilfe von JavaScript können Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. So können Sie zum Beispiel erzwingen, dass in einem Eingabefeld eine Zahl in einem bestimmten Wertebereich eingegeben wird usw. Innerhalb dieser Dokumentation finden Sie ein Anwendungsbeispiel <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../javascript/beispiele/formulareingaben.htm"><b>Formulareingaben überprüfen</b></a>.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</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"> <a class="an" name="felder_vorbelegung">Textvorbelegung bei einzeiligen Eingabefeldern</a></h2>
<p>Sie können ein einzeiliges Eingabefeld mit einem Inhalt vorbelegen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/input_text_value.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Einfach &uuml;berschreiben...</h1>
<form action="input_text.htm">
<p>Vorname:<br>
<input name="vorname" type="text" size="30" maxlength="30" value="Michaela">
</p>
<p>Zuname:<br>
<input name="zuname" type="text" size="30" maxlength="40" value="Mustermann">
</p>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem zusätzlichen Attribut <code>value=</code> können Sie einen Text bestimmen, mit dem das Feld vorbelegt wird (<i>value = Wert</i>).</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</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"> <a class="an" name="felder_passwort">Eingabefelder für Passwörter</a></h2>
<p>Für die Eingabe von Geheimnummern, Passwörtern usw. gibt es einen speziellen Typ von Eingabefeld. Die eingegebenen Zeichen werden dabei durch Platzhalter (meistens Sternchen) dargestellt, so dass Personen im Raum des Anwenders nicht zufällig das eingegebene Passwort mitlesen können.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/input_password.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Nur nicht auf die Tastatur gucken lassen ... :-)</h1>
<form action="input_password.htm">
<p>Kennwort:<br>
<input name="kennwort" type="password" size="12" maxlength="12">
</p>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Eingabefelder für Passwörter werden mit <code>type="password"</code> im <code><input></code>-Tag definiert.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Passwörter werden beim normalen HTTP-Protokoll trotz der verdeckten Eingabe im Klartext über das Internet übertragen. Weisen Sie Anwender in ernsthaften Zusammenhängen auf diese Tatsache bitte explizit hin. Für eine verschlüsselte Kommunikation zwischen Browser und Server gibt es das HTTPS-Protokoll, das der Web-Server unterstützen muss. Fragen Sie gegebenenfalls Ihren Provider oder Webmaster danach.</p>
<p>Ein Passwortfeld in HTML ist keine Abfrage für geschützte Web-Seiten. Lesen Sie zu diesem Thema den Abschnitt über <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../diverses/htaccess.htm"><b>.htaccess - Server-Reaktionen kontrollieren</b></a>.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</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"> <a class="an" name="bereiche">Mehrzeilige Eingabebereiche definieren</a></h2>
<p>Mehrzeilige Eingabefelder dienen zur Aufnahme von Kommentaren, Nachrichten usw.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/textarea.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Ganz spontan</h1>
<form action="textarea.htm">
<p>Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:<br>
<textarea name="user_eingabe" cols="50" rows="10"></textarea>
</p>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p><code><textarea ...></code> leitet ein mehrzeiliges Eingabefeld ein (<i>textarea = Textbereich</i>). Jedes mehrzeilige Eingabefeld sollte ebenso wie ein <img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"> <a href="#felder"><b>einzeiliges Eingabefeld</b></a> einen internen Bezeichnernamen erhalten, und zwar mit der Angabe <code>name=</code>.</p>
<p>Pflicht ist die Angabe zur Höhe und Breite des Eingabebereichs. Das Attribut <code>rows=</code> bestimmt die Anzahl der angezeigten Zeilen (<i>rows = Zeilen</i>) und damit die Höhe, während <code>cols=</code> die Anzahl der angezeigten Spalten (<i>cols = columns = Spalten</i>) festlegt. "Spalten" bedeutet dabei die Anzahl Zeichen (pro Zeile).</p>
<p>Mit <code></textarea></code> schließen Sie das mehrzeilige Eingabefeld ab. Das End-Tag ist nötig und darf nicht weggelassen werden.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Die Attribute <code>rows=</code> und <code>cols=</code> bestimmen lediglich die Anzeigegröße des Eingabebereichs, nicht die Länge des erlaubten Textes. Die ist theoretisch unbegrenzt. Web-Browser statten die mehrzeiligen Eingabefelder bei der Anzeige üblicherweise mit Scrollbalken aus, so dass der Anwender bei längeren Eingaben scrollen kann.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</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"> <a class="an" name="bereiche_vorbelegung">Textvorbelegung bei mehrzeiligen Eingabebereichen</a></h2>
<p>Sie können ein mehrzeiliges Eingabefeld mit Inhalt vorbelegen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/textarea_vorbelegt.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Schreiben Sie eine Geschichte!</h1>
<form action="textarea.htm">
<p>Hier der Anfang der Geschichte:<br>
<textarea name="user_eingabe" cols="50" rows="10">
Es war dunkel, feucht und neblig, ein richtiger Novemberabend. Bernie hatte alles
so weit vergessen, was geschehen war, und stapfte gedankenverloren und irgendwie
leer durch die Stra&szlig;e. Da pl&ouml;tzlich ...
</textarea></p>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Um mehrzeilige Eingabefelder mit Text vorzubelegen, notieren Sie den gewünschten Text einfach als Elementinhalt zwischen dem einleitenden <code><textarea></code>-Tag und vor dem abschließenden <code></textarea></code>.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/msie4.gif" width="30" height="30" border="0" alt="MSIE 4.0"><img src="../../src/netsc2.gif" width="30" height="30" border="0" alt="Netscape 2.0"> <a class="an" name="bereiche_umbruch">Zeilenumbruch bei mehrzeiligen Eingabebereichen</a></h2>
<p>Dies gehört nicht zum HTML-Standard, weil das W3-Konsortium wohl davon ausgeht, dass Text innerhalb eines mehrzeiligen Eingabebereichs bei der Eingabe automatisch umgebrochen wird. Nicht so jedoch bei Netscape bis einschließlich Version 4.x. Dort wird automatisch quer gescrollt, solange der Anwender keine Return-Taste drückt, um eine neue Zeile zu beginnen. Um die Option des automatischen Zeilenumbruchs zu erlauben, hat Netscape seinerzeit ein Attribut eingeführt, um den Zeilenumbruch kontrollierbar zu machen. Der Internet Explorer interpretiert dieses Attribut ebenfalls. Aber wie es bei proprietären Sprachbestandteilen so ist - mittlerweile ist ein Wildwuchs an Wertzuweisungen entstanden. Und wenn Sie das Attribut verwenden, erzeugen Sie in jedem Fall ungültiges HTML.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/textarea_wrap.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<html>
<head>
<title>Textumbruch in mehrzeiligen Eingabebereichen</title>
</head>
<body>
<h1>Brechen Sie um, aber nicht ab!</h1>
<form action="textarea_wrap.htm">
<p>einmal soft:<br><textarea name="soft" cols="30" rows="3" wrap="soft"></textarea></p>
<p>einmal hard:<br><textarea name="hard" cols="30" rows="3" wrap="hard"></textarea></p>
<p>einmal physical:<br><textarea name="physical" cols="30" rows="3" wrap="physical"></textarea></p>
<p>einmal virtual:<br><textarea name="virtual" cols="30" rows="3" wrap="virtual"></textarea></p>
<p>und einmal off:<br><textarea name="off" cols="30" rows="3" wrap="off"></textarea></p>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem nicht-standardisierten Attribut <code>wrap=</code> können Sie den Zeilenumbruch steuern (<i>wrap = Umbruch</i>). Die folgenden Angaben sind "ohne Gewähr":<br>
<code>wrap="soft"</code> wird von Netscape 4.x interpretiert und bewirkt automatischen Zeilenumbruch bei der Anzeige. Beim Absenden des Formulars werden an Stellen, wo der Text umgebrochen ist, jedoch keine Zeilenumbruchzeichen übertragen.<br>
<code>wrap="hard"</code> wird von Netscape 4.x interpretiert und bewirkt automatischen Zeilenumbruch bei der Anzeige. Beim Absenden des Formulars werden die Zeilenumbruchzeichen an Stellen, wo der Text automatisch umgebrochen ist, übertragen.<br>
<code>wrap="virtual"</code> wird vom MS Internet Explorer ab Version 4.x und den Netscape-Versionen 2.x und 3.x interpretiert und ist gleichbedeutend mit <code>wrap="soft"</code>.<br>
<code>wrap="physical"</code> wird vom MS Internet Explorer ab Version 4.x und den Netscape-Versionen 2.x und 3.x interpretiert und ist gleichbedeutend mit <code>wrap="hard"</code>.<br>
<code>wrap="off"</code> wird vom MS Internet Explorer ab Version 4.x und von Netscape interpretiert und ist gleichbedeutend mit der Voreinstellung von Netscape bis einschließlich Version 4.x - nämlich keinen Text automatisch umzubrechen.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</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"> <a class="an" name="nurlesen">Eingabefelder und Eingabebereiche auf "nur lesen" setzen</a></h2>
<p>Sie können erzwingen, dass ein Eingabefeld kein Eingabefeld mehr ist, sondern eigentlich nur ein Ausgabefeld, und ein Eingabebereich nur ein Ausgabebereich. Das kann beispielsweise interessant sein, wenn Sie <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../javascript/index.htm"><b>JavaScript</b></a>-ermittelte Werte in einem Formularfeld ausgeben möchten, oder wenn Sie Felder mit einem Wert vorbelegen möchten, den der Anwender aber nicht ändern können soll.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/readonly.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Kein Rabatt und keine Gnade</h1>
<form action="input_text_value.htm">
<p>Preis:<br>
<input name="vorname" type="text" size="8" value="&euro; 699.-" readonly>
</p>
<p>Lizenzvereinbarung:<br>
<textarea name="lizenz" cols="50" rows="10" readonly>
Mit dem Absenden des Formulars stimme ich zu, dass ich diese
Lizenzvereinbarung gelesen habe usw.
</textarea>
</p>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem Attribut <code>readonly</code> können Sie ein einzeiliges Eingabefeld oder einen mehrzeiligen Eingabereich auf "nur lesen" setzen.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Bei älteren Browsern funktioniert diese Angabe nicht, und der Feldeintrag ist für den Anwender überschreibbar!</p>
<p>Wenn Sie XHTML-konform arbeiten wollen, müssen Sie das Attribut in der Form <code>readonly="readonly"</code> notieren. Weitere Informationen dazu im Kapitel <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../xhtml/index.htm"><b>XHTML und HTML</b></a>.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</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"> <a href="../referenz/index.htm"><b>HTML-Referenz</b></a> finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, 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"> <a href="../referenz/elemente.htm#input"><b>Element-Referenz</b></a> für Input-Formularelemente (<code><input></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#input"><b>Attribut-Referenz</b></a> für Input-Formularelemente (<code><input></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#textarea"><b>Element-Referenz</b></a> für mehrzeilige Eingabebereiche (<code><textarea>...</textarea></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#textarea"><b>Attribut-Referenz</b></a> für mehrzeilige Eingabebereiche (<code><textarea>...</textarea></code>)</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <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="auswahl.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="auswahl.htm"><b>Auswahllisten, Radiobuttons und Checkboxen</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="definieren.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="definieren.htm"><b>Formulare definieren</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </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>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
