Input Felder untereinander

[freakXHTML]

Hallo zusammen,
ich sehe mich gerade leider nicht in der Lage, ein Formular zu erstellen. Ich möchte, dass die Eingabefelder alle schön untereinander sind und nicht anfangen, wo das davor stehende Wort aufhört. Ich habe jetzt alles in eigene divs gepackt, doch das bringt nichts. Es sieht aus wie vorher:

<form action="index.php?section=register" method="post">
    <fieldset>
  <legend> Registieren </legend>
  <div>
   Benutzername:
   <input type="text" name="Username" /><br />
  </div>
  <div>
   Passwort
   <input type="password" name="Password[]" /><br />
  </div>
  <div>
   Bestätigung
   <input type="password" name="Password[]" /><br />
  </div>
  <div>
   E - Mail:
   <input type="text" name="EMail" /><br />
  </div>
    </fieldset>
</form>

Was muss ich ändern, damit die Eingabefelder alle formatiert untereinander stehen?

edit: So funktioniert es, aber hat jemand vielleicht eine schönere Lösung?

<form action="index.php?section=register" method="post">
    <fieldset>
  <legend> Registieren </legend>
  <p style="float:left;">
      Benutzername:<br />
   <span style="line-height:25px;">Passwort:<br /></span>
   <span style="line-height:25px;">Bestätigung:<br /></span>
   <span style="line-height:25px;">E - Mail:<br /></span>
  </p>
   
  <div>
   <input type="text" name="Username" /><br />
   <input type="password" name="Password[]" /><br />
   <input type="password" name="P" /><br />
   <input type="text" name="Username" /><br /><br />
  </div>
   <input type="submit" name="formaction" value="Registieren" />
  
    </fieldset>
</form>

Vielen Dank
lg, freakXHTML

 

[Excelsion]

Also da gibts 2 Methoden:

1.) Ist die leichtere! Allerdings musst du CSS beherrschen, damit geht das.
2.) mit

 

Leerzeichen vor die Eingabefelder einbauen und diese so auf die gleiche höhe bringen.... ist allerdings ziemlich zeitaufwändig^^:razz:

 

[freakXHTML]

Ich kann CSS Grundlagen. Das mit den Leerzeichen ist aber eher nicht so schön.

Ich möchte nun, dass sowohl der Text als auch die Eingabefelder im fieldset immer in der Mitte sind. Mit text-decoration:center rutschen nur die Eingabefelder in die Mitte. Was muss ich ändern? Hier ist der aktuelle Quelltext:

<form action="index.php?section=register" method="post">
    <fieldset >
  <legend> Registieren </legend>
  <div style="text-align:center;">
  <p style="float:left;">
      Benutzername:<br />
   <span style="line-height:25px;">Passwort:<br /></span>
   <span style="line-height:25px;">Bestätigung:<br /></span>
   <span style="line-height:25px;">E - Mail:<br /></span>
  </p>
   
  <div>
   <input type="text" name="Username" /><br />
   <input type="password" name="Password[]" /><br />
   <input type="password" name="P" /><br />
   <input type="text" name="Username" /><br /><br />
  </div>
   <input type="submit" name="formaction" value="Registieren" />
  </div>
  
    </fieldset>
</form>

 

[_Thor_]

Als erstes zeichne deine Beschriftungen mal als <label> aus, denn dafür gibt es dieses Tag, dann entfernst du alle div, p, span und br, die haben dort nichts verloren.

Dann kannst du mit float: left, display: block, margin und Breitenangaben eigentlich alles so formatieren, wie du es möchtest.

 

[freakXHTML]

Hallo,
vielen Dank für die Antwort. Ich habe alle erwähnten Dinge entfernt und nun display:block verwendet. Doch wie soll ich ohne div die Eingabefelder zusammenfassen, sodass sie alle untereinander und neben den Labeln steht? Außerdem wäre doch auch für margin ein div notwendig, weil ich den kompletten Inhalt des fieldsets ja ansprechen muss.

<form action="index.php?section=register" method="post">
    <fieldset >
  <legend> Registieren </legend>
  <div style="margin-left:38%;">
    <div style="float:left;">
      <label style="display:block; line-height:24px;">Benutzername:</label>
   <label style="display:block; line-height:24x;">Passwort:</label>
   <label style="display:block; line-height:24px;">Bestätigung:</label>
   <label style="display:block; line-height:24px;">E - Mail:</label>
    </div>
   <input style="display:block;" type="text" name="Username" />
   <input style="display:block;" type="password" name="Password[]" />
   <input style="display:block;" type="password" name="P" />
   <input style="display:block;" type="text" name="Username" />
   <input style="display:block;" type="submit" name="formaction" value="Registieren" />
  </div>
  
    </fieldset>
</form>

Wie kann ich das denn ohne divs machen? Wenn ich mein IE Fenster immer kleiner mache, dann ist irgendwann der Inhalt des fieldsets nicht mehr in der Mitte. Was mache ich falsch?

Vielen Dank
lg, freakXHTML

 

[_Thor_]

Labels und Eingabefelder werden nicht gruppiert.

<fieldset>
  <label></label>
  <input />
  <label></label>
  <input />
  <label></label>
  <input />
</fieldset>

 

[freakXHTML]

Und wie soll ich dann alle Eingabefelder zusammenfassen, damit sie schön untereinander stehen? Wo soll sonst mit margin arbeiten? Könnt ihr mir da weiterhelfen?

Vielen Dank
lg, freakXHTML

 

[_Thor_]

Wo soll denn die Beschriftung stehen, wenn die Eingabefelder untereinander stehen sollen?

 

[Elroy]

Entschuldigung das ich mich einmische.

Wo soll denn die Beschriftung stehen, wenn die Eingabefelder untereinander stehen sollen?

Wahlweise rechts oder links neben den Eingabefeldern.

Gruss
Elroy

 

[_Thor_]

Wenn man noch etwas mit margin und padding spielt, sollte das hier helfen.

label {clear: both; float: left;}
input {display: block;}