Input Box anordnen

[Thomas]

Hallo,

ich mache grade eine Einführung in Php, es soll ein Loginformular erstellt werden, ich habe folgendes:

<form action="index.php?section=register" method="post">
    <fieldset>
        <legend>Registieren</legend>
        <label>Username: <input name="Username"  type="text"/></label><br />
        <label>Password: <input type="password" name="Password[]"/></label><br />
        <label>Bestätigung: <input type="password" name="Password[]" /></label><br />
        <label>Email: <input type="text" name="Email" /></label><br />
        <label>{FRAGE}: <input type="text" name="Antwort" /></label><br />
        <input type="submit" name="formaction" value="Registieren" /><br />
  </fieldset>
</form>

Ich bin mit den Input-Boxen nicht zufrieden, sie sind nicht schön in einer pseudo vertikalen Linie, wenn ich ein div mache mit Abstand links, wird eine neue Zeile angefangen und span hat keine definition für Abstand (margin:left), oder so... nicht Köpfen ist ein Einstieg...

Bisschen spät aber man weiss ja nie :)

mfg Thomas Hohlkreuz

[Beat]

<label>Username: <input name="Username"  type="text"/></label><br />

...

<label for="someid"></label><input id="someid">

Dann label floaten oder display:inline-block.

mfg Beat

[Thomas]

Hallo,
wenn ich dafür inline block oder floate, dann komm ich zu keinem guten Ergebnis...

<form action="index.php?section=register" method="post">
    <fieldset>
        <legend>Registieren</legend>
        <label for="Username">Username:</label> <input id="Username"  type="text"/>
        <label for="password">Password: </label> <input id="password" name="Password[]"/>
        <label for="password">Bestätigung:</label><input id="password" name="Password[]" />
        <label for="Email">Email:</label><input type="text" id="Email" />
        <label for="Antwort">{FRAGE}:</label><input type="text" id="Antwort" /></br>
        <input type="submit" name="formaction" value="Registieren" />
  </fieldset>
</form>

in css:

label{
float:right

}

Vielleicht was falsch geschrieben?

[Gunnar Bittersmann]

@@Thomas:

nuqneH

Hallo,
wenn ich dafür inline block oder floate, dann komm ich zu keinem guten Ergebnis...

Sondern?

label{
float:right
}

Du willst das Label _rechts_ neben dem Eingabefeld haben?

Sowohl 'display: inline-block' als auch 'float' (was implizit 'display: block' setzt) haben zum Ziel, eine 'width'-Angabe wirken zu lassen (was bei 'display: inline' nicht der Fall ist).

'display: inline-block' würde ich bevorzugen; 'float' schafft nur Probleme.

Oder du verwendest Markup wie

<fieldset>  
  <legend>  
  <table>  
    <tbody>  
      <tr>  
        <th><label/></th>  
        <td><input/></td>  
      </tr>  
      ⋮  
    </tbody>  
  </table>  
</fieldset>

Qapla'

[Felix Riesterer]

Lieber Thomas,

zunächst finde ich die Struktur Deines (X)HTML-Codes ungut. Warum keine Liste? Im folgenden Beispiel greife ich auch Beats Anregung auf:

<form action="index.php?section=register" method="post">  
    <fieldset>  
        <legend>Registrieren</legend>  
        <ul>  
            <li>  
                <label for="username">Username</label>  
                <input name="username" id="username" />  
            </li>  
            <li>  
                <label for="password">Passwort</label>  
                <input name="password[]" id="password" type="password" />  
            </li>  
            <li>  
                <label for="password2">Bestätigung</label>  
                <input name="password[]" id="password2" type="password" />  
            </li>  
            <li>  
                <label for="email">Email</label>  
                <input name="email" id="email" />  
            </li>  
            <li>  
                <label for="antwort">{FRAGE}</label>  
                <input name="antwort" id="antwort" />  
            </li>  
            <li>  
                <input name="formaction" id="formaction" value="registrieren" type="submit" />  
            </li>  
        </ul>  
    </fieldset>  
</form>

Nun kannst Du mit CSS die Liste auf eine bestimmte Breite festlegen, innerhalb derer die <li>-Elemente rechtsbuendig (text-align:right) ausgerichtet sind. Wenn Du dann den <input>-Elementen allen eine feste Breite zuweist, dann erscheinen sie alle untereinander als stünden sie jeweils in einer zweiten Tabellenspalte.

Die <label>-Elemente kannst Du dann links floaten lassen, damit sie linksbündig erscheinen. Wenn Du den <label>-Elementen dann auch noch eine feste Breite zuweist, sie mit display:inline-block versiehst und dann mit text-align:right ihre Textinhalte rechtsbündig ausrichtest, dann sieht das eher nach Deinen Vorstellungen aus.

Da im HTML-Code jede Menge IDs enthalten sind, kannst Du diese nutzen, um z.B. den Submit-Button anders auszurichten. Wie das dann mit der Frage aussieht, müsste man prüfen. Vielleicht willst Du sie ja gerade nicht in ein <label>-Element setzen...?

In PHP (und auch JavaScript) habe ich mir konsequente Kleinschreibung von Variablennamen angewöhnt. Großbuchstaben sind Konstanten (oder Konstruktoren) Vorbehalten. Daher habe ich in den name-Attributen überall Kleinschreibung verwendet.

Liebe Grüße,

Felix Riesterer.

[Thomas]

Hallo,

erstmal Sorry wegen dem doppel Post, man wills sich ja nicht gleich verschärzen :/...

Also, hab das Problem grad gelöst, hatte meinen inputfeld zu groß gemacht, naja...

Schönen Abend noch,

Thomas