Formularelemente gestalten/Anordnen

  • Moin,


    Ich verwende für mein Vorhaben das Multi-Step-Formular von:

    https://www.w3schools.com/howto/howto_js_form_steps.asp


    Hier mein Code:


    Folgendes habe ich selber geschrieben:

    Ergebnis:

    result.jpeg


    Ich komme einfach nicht drauf wieso es "nicht schön" im Feld liegt... Kann mir jemand helfen?


    Merci & Gruss

  • OKay, das hier ist komplett:


    Die Index.php:

    Die style.css:

    Die script.js:



    Gruss

  • Ich habe mir das mal angeguckt.

    Bevor ich hier Tipps geben kann, habe ich noch eine bzw. mehrere Fragen zu deinem Projekt.


    Was genau willst du mit dem Formular machen? So wie es jetzt ist, ist es nicht ausgereift.

    Deine Eingabefelder für "nebeneinander" würden immer angezeigt werden, wenn du auf den Button NEXT drückst.


    Vielleicht kannst du etwas mehr dazu sagen, was du vor hast, dann kann man dir eventuell auch Konzeptionelle Tipps geben.

  • Hallo, danke für deine Antwort.


    Das Formular muss über mehrere "Seiten" gehen, damit es möglichst "nicht überladen" aussieht.

    Insgesamt sind es 6 "tab's"/"Seiten", welche über viele verschiedene Steuerelemente verfügen (labels, textboxen, textarea, Radiobuttons, Checkboxen usw...).


    Die Daten, welche eingegeben werden, werden anschliessend zum Teil ausgewertet und in unterschiedliche Tabellen im phpmyadmin gespeichert (in save.php--> <form id="regForm" action="save.php"> ). Danach geht es richtung Benutzerkonto.


    Den Personen, die es ausfüllen kann ich kein einfaches HTML-Formular zutrauen und wäre auch nicht mehr Zeitgemäss. Deshalb muss es mit CSS "schön" gemacht und auch per Javascript während dem ausfüllen "geholfen" werden.


    Vor diesem Projekt habe ich mit Quform ( https://www.quform.com/examples ) das ganze ausprobiert und war eigentlich sehr zufrieden mit dem Ergebnis. Wegen der Datenbank-Komplexität ist das aber damit nicht möglich. Deshalb bin ich nun damit beschäftigt das ganze selbst auf die Beine zu stellen.


    Siehe dir > https://www.quform.com/examples -->"Contact Us" < an. Sowas will ich mit "nebeneinander" bezwecken / in diesem Style soll es später aussehen.


    Mir ist klar, dass ich sicherheitsbezogene Dinge wie SQL-Injection / XSS bewusst nicht berücksichtigt habe. Das kommt alles noch.


    Bin bereits ca. 1 Jahr mit lernen (nicht von Grundauf) und ca. 1/2 Jahr mit dem selber machen beschäftigt :)


    Gruss

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von user1 ()

  • Die Empfehlung bei solchen Layout-Problemen ist immer dieselbe: Verabschiede dich von float und mache dich mit Flexlayout vertraut. Damit ist es wesentlich einfacher, die Anordnung der Element, die dir vorschwebt, zu realisieren.

    Das Beispiel bei quform gefällt mir auch und es dürfte kein Problem sein, dein Formular ebenfalls in diesem Stil zu gestalten.