HTML <form> Formulare nebeneinander darstellen
Corsin Capol
Ich habe folgendes Problem... ich will zwei Formulare <form> bzw. die Daten
die sich darin befinden (textfeld etc.) nebeneinander darstellen.
Normalerweise wird ja nach jedem Formular ein Zeilenumbruch eingefuegt.
Bsp:
------------Codeschnipsel-------------------------
<form name="form1" method="post" action="">
<input type="text" name="textfield">
</form>
<form name="form2" method="post" action="">
<input type="text" name="textfield2">
</form>
------------Codeschnipsel-------------------------
Wird so dargestellt, dass jedes Textfeld auf einer neuen Zeile ist. Wie kann
ich das ausser mit einer Tabelle noch lösen, dass die Textfelder in den
Formularen (<form>) nebeneinander dargestellt werden? Müssen zwei <form>'s
sein!
mfg
Corsin
Christoph Schmid
> ich das ausser mit einer Tabelle noch lösen, dass die Textfelder in den
> Formularen (<form>) nebeneinander dargestellt werden? Müssen zwei <form>'s
> sein!
zwei Frames :-)
was ist an Tabellen schlecht?
Geht damit doch prima.
Thomas Luethi
>Ich habe folgendes Problem... ich will zwei Formulare <form> bzw. die Daten
>die sich darin befinden (textfeld etc.) nebeneinander darstellen.
>Normalerweise wird ja nach jedem Formular ein Zeilenumbruch eingefuegt.
Ja, denn <FORM> ist ein Block-Level-Element.
>Wie kann ich das ausser mit einer Tabelle noch lösen, dass die
>Textfelder in den Formularen (<form>) nebeneinander dargestellt werden?
Also, wenn ich Dich richtig verstanden habe, willst Du, dass zwei
verschiedene _Formulare_ auf der gleichen Hoehe nebeneinander stehen:
Formular 1 | Formular 2
Frage 1.1 [ ] | Frage 2.1 [ ]
Frage 1.2 [ ] | Frage 2.2 [ ]
[Abschicken 1] | [Abschicken 2]
Am naheliegendsten und einfachsten ist es, diese Anordnung mit einer
"blinden" Tabelle zu machen.
Du kannst aber natuerlich auch versuchen, es mit CSS zu loesen.
Ein Ansatz waere folgendes:
------CSS:----------
#form1 { width:20em; margin:0; float:left; border:1px solid #990000; }
#form2 { width:20em; margin:0 0 0 21em; border:1px solid #000099;}
------HTML:---------
<form id="form1" name="form1" method="post" action="/">
Eingabe 1.1: <input type="text" name="textfield11"><br>
Eingabe 1.2: <input type="text" name="textfield12"><br>
<input type="Submit" name="Abschicken1" value="Abschicken1">
</form>
<form id="form2" name="form2" method="post" action="/">
Eingabe 2.1: <input type="text" name="textfield21"><br>
Eingabe 2.2: <input type="text" name="textfield22"><br>
<input type="Submit" name="Abschicken2" value="Abschicken2">
</form>
Das funktioniert einigermassen in den meisten Browsern und fuehrt auch
bei sehr schmalen Browser-Fenstern nicht zu Ueberlagerungen.
Eine kleine Testseite habe ich fuer Dich aufs Netz gestellt [1]; dort
entspricht obiger Code den Formularen 5 und 6.
Leider sieht es im Netscape 4.x ziemlich scheusslich aus - viel zu
grosse Abstaende.
Wenn es egal ist, dass die Formulare im Netscape 4 halt untereinander
stehen, dann kannst Du die CSS-Deklarationen in eine externe Datei
schreiben und diese vor dem Netscape 4.x "verstecken" [2].
Wenn es wirklich wichtig ist, dass die beiden Formulare nebeneinander
stehen, ist IMHO nur eine Tabelle sinnvoll und praktikabel.
Die wahren HTML- und CSS-Profis im deutschen Sprachraum tummeln sich
in der Newsgroup
de.comm.infosystems.www.authoring.misc (kurz: dciwam)
Deine Frage waere dort stark On-Topic. Ich verzichte aber auf ein XP.
Bevor Du dort postest, solltest Du allerdings die FAQ [3] lesen.
Am besten machst Du mal eine Beispieldatei davon, wie es aussehen soll
(alle Formularfelder mit der entsprechenden Beschriftung, die
Anordnung kann auch mit Tabellen sein). Dann stellst Du die Datei ins
Netz, schaust, dass HTML und CSS valide sind ([4],[5]) und postest
dann Deine Frage mit Angabe der URL in dciwam. Sag auch gleich, wie
wichtig das Layout in Netscape 4 fuer Dich ist.
Wahrscheinlich kann Dir in dciwam jemand einen besseren Vorschlag
machen als mein obiges Gebastel.
Mit CSS Level 2 waere eigentlich sehr vieles moeglich, bloss ist die
Browser-Unterstuetzung dafuer noch sehr mangelhaft, und Netscape 4
macht einem immer wieder einen Strich durch die Rechnung...
>Müssen zwei <form>'s sein!
Dann brauchst Du auch zwei Submit-Buttons u.s.w., das weisst Du?
Und es waere sinnvoll, auch dem Benutzer klar zu machen, dass es sich
um zwei verschiedene Formulare handelt, z.B. mit farbigen Rahmen
und/oder verschiedenen Hintergrundfarben u.s.w.
HTH, mfg
Thomas
[1] <http://www.tiptom.ch/tests/css/2forms.html>
[2] <http://pixels.pixelpark.com/~koch/hide_css_from_browsers/>
[3] <http://www.dciwam.de/faq/>
[4] <http://validator.w3.org/>
[5] <http://jigsaw.w3.org/css-validator/>
Quali-Shop
Hier noch Das HTML zu Deiner Frage:
<html>
<head>
<title>2 Formulare nebeneinander</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="370">
<tr align="center" valign="middle">
<td>
<form name="form1" method="post" action="">
<input type="text" name="textfield">
</form>
</td>
<td>
<form name="form2" method="post" action="">
<input type="text" name="textfield">
</form>
</td>
</tr>
</table>
</body>
</html>
mit freundlichen Grüssen
Roli Frei
Web : http://www.rolinet.ch
"Corsin Capol" <snake...@hotmail.com> schrieb im Newsbeitrag
news:3d316bc5$1...@news.swissonline.ch...
Matthias Leisi
Quali-Shop antwortete in ch.comp auf sich selbst:
>Hier noch Das HTML zu Deiner Frage:
Das ganze mit folgendem Header:
>Path: [..]!news.imp.ch!news.imp.ch!news.tiscalinet.ch!not-for-mail
>Message-ID: <3d380...@news.tiscalinet.ch>
>From: "Quali-Shop" <roli...@qualisoft.ch>
>Newsgroups: ch.comp
>Subject: Re: HTML <form> Formulare nebeneinander darstellen
>Date: Fri, 19 Jul 2002 15:05:18 +0200
>X-Newsreader: Microsoft Outlook Express 6.00.2600.0000
>X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2600.0000
>NNTP-Posting-Host: 212.254.82.108
>X-Trace: news.tiscalinet.ch 1027083652 212.254.82.108 (19 Jul 2002 15:00:52 +0200)
>Organization: Customers of Tiscali DataComm AG - http://www.tiscali.ch/
Seine ursprüngliche Message, auf die das Followup ging:
|Path: [..]!news.imp.ch!news-zh.switch.ch!news.swissonline.ch!not-for-mail
|Message-ID: <3d316bc5$1...@news.swissonline.ch>
|<From: "Corsin Capol" <snake...@hotmail.com>
|Newsgroups: ch.comp
|Subject: HTML <form> Formulare nebeneinander darstellen
|Date: Sun, 14 Jul 2002 14:17:07 +0200
|X-Newsreader: Microsoft Outlook Express 6.00.2600.0000
|X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2600.0000
|NNTP-Posting-Host: 217.162.117.105
|X-Trace: news.swissonline.ch 1026649029 217.162.117.105 (14 Jul 2002 14:17:09 +0200)
Qualisoft.ch ist sehr eng mit quali-shop.ch verbunden, welche
die Dummheit besitzen, explizite Spamtrap-Adressen zu bespammen:
| 20020717-19...@trap.astrum.ch
Diese Adresse wurde von meiner Webseite gescannt:
| www.astrum.ch 194.230.167.31 - - [17/Jul/2002:14:48:34 +0200] "GET / HTTP/1.0" 200 4615 "-" "Mozilla/3.0 (compatible)"
und auch gleich zum Spammen missbraucht:
| Received: from freesurfmail.sunrise.ch (freesurfmta04.sunrise.ch [194.230.0.33])
| by hub.net.astrum.ch (8.11.2/8.11.2/SuSE Linux 8.11.1-0.5) with ESMTP id g6HD1Rf16690
| for <20020717-19...@trap.astrum.ch>; Wed, 17 Jul 2002 15:01:27 +0200
Das Carsin Capol-Fake würde sehr gut daran tun, den
Netzmissbrauch durch seine Spammer-Bude zu erklären.
Datacomm/Tiscali und Swissonline sollten sich überlegen, ob sie
_solche_ Kunden noch haben wollen. Sunrise/Freesurf sollten sie
sowieso bereits hochkant herausgeworfen haben - Complaints
gingen raus.
>Web : http://www.rolinet.ch
Ah, noch eine Domain in Verbindung mit dem Diebstahl von fremden
Ressourcen.
Gruss,
Matthias, der diesen Spammer-Abschaum nur noch zum Kotzen
findet.