Felix Riesterer: Input Box anordnen

Beitrag lesen

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.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)