Problem bei Formularen (darstellung)

html.de-Forum HTML, XHTML & CSS
1

[HTML]

<tr>
  <td align="right">Nr:</td>
  <td><input name="Nr" type="text" size="30" maxlength="40"></td>
</tr>
<tr>
  <td align="right">Nachname:</td>
  <td><input name="Nachname" type="text" size="30" maxlength="40"></td>
</tr>
<tr>
  <td align="right">Vorname:</td>
  <td><input name="vorname" type="text" size="30" maxlength="30"></td>
</tr>
<tr>
  <td align="right">Firma:</td>
  <td><input name="Firma" type="text" size="30" maxlength="40"></td>
</tr>

<tr>
  <td align="right">Email:</td>
  <td><input name="Email" type="text" size="30" maxlength="40"></td>
</tr>
    <tr>
  <td align="right">BestellnummerFirma:</td>
  <td><input name="Bestellnummer" type="text" size="30" maxlength="40"></td>
</tr>

<tr>
  <td align="right">Anzahl:</td>
  <td><input name="Anzahl" type="text" size="30" maxlength="40"></td>
</tr>
[/HTML]

Nun möchte ich das Formular etwas besser darstellen. Soll heissen: Oberhalb der Eingabe der Kundendaten soll stehen: „Kundendaten“.
Oberhalb der Felder Anzahl u Bestellnummer soll stehen: „Bestellung“.
Wäre dankbar über ein Codebeispiel.
Gruss

2

Eine Tabelle ist denkbar ungeeignet als Grundlage für ein Formular. Formulare sollte man mittels fieldset, legend, label und den Formulareingabefeldern strukturieren. In deinem Fall (gaaaanz grobes Beispiel):

[code]

Kundendaten Nachname Vorname Bestellung Anzahl Bestellnummer [/code]
3

Okay, hast mich überzeugt. Mit Fieldset gehts tatsächlich besser. Jetzt habe ich nur ein Problem. Wie bringe ich beispielsweise das so hin, dass ich alles etwas besser geordnet habe. Soll heissen, dass die Eingabefelder beispielsweise alle schön untereinander sind (egal wie lange das label zuvor ist).
Ausserdem würde mich interessieren, ob ich beispielsweise die Eingabefelder eines zweiten Fieldsets (im gleichen Formular natürlich) auch so formatieren kann, dass Sie auch unter denen des ersten Fieldsets stehen?
(Die Beantwortung der ersten Frage wäre mir am allerwichtigsten!)
Gruss und vorab danke!
Achja, der Quelltext beispielsweise:
[HTML]

Anmeldung
Vorname 
  <label for="grossername" >grossername </label>
  <input id="grossername" type="text" name="grossername" size="30" value=" Name" /><br>
  <label for="klnam" >klnam </label>
  <input id="klnam" type="text" name="klnam" size="30" value=" Name" /><br>
  <label for="riesiglangervorname" >riesiglangerVorname </label>
  <input id="riesiglangervorname" type="text" name="riesiglangervorname" size="30" value=" Name" /><br>


  <label for="name">Name </label>
  <input id="name" type="text" name="nachname" size="30" value=" Vorname" />



Nachricht

[/HTML]
4

das ist ganz einfach. Mittels CSS legst du fest, wie breit die Labels sein sollen:

.meinFieldset label{ display: inline-block; width: 120px; overflow: hidden; text-align: right; }

dann gibts du deinem fieldset nur noch das attribut ‚class=„meinFieldset“‘ und alle Labels da drin sollten schön formatiert werden.

Das selbe beim 2. Fieldset und es sollte passen.

5

ich könnte vor Freude laut durch die Luft schreien :wink:

Muchas Dankeschön!!!
Wie bereits erwähnt, es kann so einfach sein wenn man weiss wie’s geht!!!
Das forum ist echt klasse!!!Dankeschön

6

hab gerade noch ne kleinigkeit entdeckt…die textarea ist aber nicht exakt drunter, das is n bissl nach links verschoben…Woran könnte das liegen?

7

und ausserdem würde mich nochmal was interessieren…Wie bekomme ich es hin, dass die textfelder einen bestimmten vertikalen Abstand haben?

8

Für beide Fragen wäre die Antwort vermutlich „Außenabstand“, also im CSS „margin“ auf 0 setzen bzw. erhöhen wenn mehr Abstand nach oben oder unten erreicht werden soll.