Albert Hermeling: Text unter input Tag positionieren

Guten Morgen,

Gestern habe ich ein HTML-Formular ohne Tabellen zu verwenden erstellt. Die Positionierung erfolgte allein mit CSS. Was auch gut funktioniert hat bis auf eins: In der letzten Zeile des Formulars sind 6 Elemente (Label, Input, Label, Input, Label, Input) unter diesen 6 Elementen soll eine Erläuterung platziert werden. Da sich die Erläuterung nicht auf alle 6 Elemente bezieht sondern nur auf einem Teil wird die Formatierung ein wenig komplizierter. Hier das Layout:

Label    Input1    Label     Input2     Label     Input3
         Text1               Text2 -->               <--
                             ....
In Worten: Text1 soll unter das erste Input Feld. Text2 soll von unter Input2 bis Input3 Reichen. Die Nächste Zeile von Text2 muß dann wieder unter Input2 anfangen.

Mein Versuch sieht so aus:

<label for="nutzer">Ihr Username</label><INPUT type="text" name="nutzer" id="nutzer">
<label for="passwort">Ihr Passwort</label><INPUT type="password" name="passwort" maxlength="8" id="passwort">
<label for="check"> Passwort (Wdh.)</label><INPUT type="password" name="passwort" maxlength="8" id="passwort">
<br>
<p style="margin-left:130px;font-size : 12px;">
Min. 8 Zeichen<span style="margin-left:210px">Das Passwort muss 8 Zeichen lang sein und es mu&#223;</span><span style="margin-left:300px" >neben Sonderzeichen auch Gro&#223;- und Kleinbuchstaben enthalten</span>
</p>

FURCHTBAR<

Der css Code der die 6 Formular Elemente formatiert steht in einer separaten *.css Datei.

Schon mal danke für die Hilfe

MfG

Albert

  1. guten morgen,

    ich würde jeweils ein label, input und den dazugehörigen text in einen container packen und diese dann mittels float nebeneinander positionieren.

    p.s.
    <label for="nutzer">Ihr Username</label><INPUT type="text" name="nutzer" id="nutzer">
    <label for="passwort">Ihr Passwort</label><INPUT type="password" name="passwort" maxlength="8" id="passwort">
    <label for="check"> Passwort (Wdh.)</label><INPUT type="password" name="passwort" maxlength="8" id="passwort">
    <br>
    <p style="margin-left:130px;font-size : 12px;">
    Min. 8 Zeichen<span style="margin-left:210px">Das Passwort muss 8 Zeichen lang sein und es mu&#223;</span><span style="margin-left:300px" >neben Sonderzeichen auch Gro&#223;- und Kleinbuchstaben enthalten</span>
    </p>

    id´s gibt es nur ein einziges mal in einem dokument (password).  der name (passwort) ist auch doppelt vorhanden -> auswertung wird schwierig.
    html-tags sollten geschlossen werden <br /> anstelle von <br>