Formulare richtig anordnen

Bindl · 13 Mai 2017

Hi zusammen,

ich habe auf einer Seite eine Menge an Formulare und die ordnen sich nicht so an wie ich das gerne hätte.
Ich bin mir nicht sicher ob dies an dem HTML Code oder an den CSS "Einstellungen" liegt.

Hier mal der HTML Code:

HTML:

{% extends "layout.html" %}

{% block title %}- Userdatenverwaltung{% endblock %}
{% block body %}

<h1>Userdaten verwalten</h1>

<div>
    <form action = "{{ url_for('user_verw') }}"  method="post">
        <div>
            <p class="inp"><input type="text" name="username1" placeholder="Username" autofocus></p>
            <p class="inp"><input type="text" name="username2" placeholder="Username wiederholen"></p>
        </div>
        <div>
            <p class="inp1"><input type="email" name="email1" placeholder="E-Mail Adresse"></p>
            <p class="inp1"><input type="email" name="email2" placeholder="E-Mail Adresse wiederholen"></p>
        </div>
        <div>
            <p class="inp2"><input type="password" name="pw1" placeholder="Passwort"></p>
            <p class="inp2"><input type="password" name="pw2" placeholder="Passwort wiederholen"></p>
        </div>
        <div>
            <p class="inp"><input type="text" name="vorname" placeholder="Vorname"></p>
            <p class="inp"><input type="text" name="nachname" placeholder="Nachname"></p>
        </div>
        <div>
            <label for="name">
                <input name="alter" type="number" min="1" max="120" step="1"> Jahre
            </label>
        </div>
        <div>
            <p class="inp"><input type="text" name="studiengang" placeholder="Studiengang"></p>
        </div>
    </form>
</div>

{% endblock %}

Hier die CSS Teile:
form{
margin-top: 30px;
float: left;
text-align: left;
margin-left: 10%;
}
p.inp{
float: left;
padding-left: 10px;
}
p.inp1{
clear: both;
float: left;
padding-left: 10px;
}
p.inp2{
float: left;
padding-left: 10px;
}

Wie es im Moment aussieht sieht man auf dem Bild im Anhang.

Wie ich es gerne hätte:
Erste Reihe: Username + Username wiederholen -> nebeneinander
Zweite Reihe: E-Mail Adresse + E-Mail Adresse wiederholen -> nebeneinander
Dritte Reihe: Passwort + Passwort wiederholen -> nebeneinander
Vierte Reihe: Vorname + Nachname -> nebeneinander
Fünfte Reihe: Alterformular
Sechste Reihe: Studiengangformular

Ich hoffe mir kann jmd. helfen

SpiceLab · 13 Mai 2017

Bindl schrieb:
Wie ich es gerne hätte:
Erste Reihe: Username + Username wiederholen -> nebeneinander
Zweite Reihe: E-Mail Adresse + E-Mail Adresse wiederholen -> nebeneinander
Dritte Reihe: Passwort + Passwort wiederholen -> nebeneinander
Vierte Reihe: Vorname + Nachname -> nebeneinander
Fünfte Reihe: Alterformular
Sechste Reihe: Studiengangformular

Abgesehen von zwei kleinen Ausreissern, könnte überall ein grüner Haken d'ran

Den Code hab ich nur kurz überflogen, nicht extra in den Browser geladen

Die auffällig grossen Zeilenabstände zwischen den <p>'s deuten zumindest darauf hin, das zu beginn des Codes kein ordentlicher CSS-Reset am Start ist, um z.B. die unerfreulich differenzierenden Browser(vor)einstellungen bzgl. Außen- oder Innenabstände abzustellen.

CSS:

* {margin:0;padding:0;}

Bindl schrieb:
Ich hoffe mir kann jmd. helfen

Das Flexbox-Modell kann - weil direkte Einflußmöglichkeiten auf das Verhalten der flexiblen Inhalte durch weitere Eigenschaften/Regeln

Heute leider nur kurz u. knapp, bin nämlich auf'm Sprung, also bitte nicht persönlich nehmen: https://www.google.de/search?q=css3+flexbox danke

Im Gegensatz zu float:left|right, das schon immer ohne clear:left|right|both nur für Ärger gesorgt, und die User in Schaaaren in die Foren getrieben hat

Ich fand es schon immer spannend, wie das Block-Element <p>, das normalerweise für autom. Zeilenumbrüche am Bildschirm sorgen soll, in so ein Korsett gezwängt wird, anstatt direkt mit <input> oder einem zusätzlichen weiteren Inline-Element zu arbeiten, das eben kein float-Eigenschaft benötigt, um neben dem Geschwister o. Nachbarn zu erscheinen

MrMurphy · 13 Mai 2017

Hallo

Von der benutzerfreundlichkeit her ist das Formular eine einzige Katastrophe. Wer nicht gezwungen ist das auszufüllen wird es lassen.

Aber zu deinem Problem:

Lass alles CSS für das Formular weg, lass die p-Elemente weg, verzichte auf die falsche Verwendung von label-Elementen - und schon hast du die von dir gewünschte Anordnung:

Code:

      <h1>Userdaten verwalten</h1>
      <div>
         <form action="{{ url_for('user_verw') }}" method="post">
            <div>
               <input type="text" name="username1" placeholder="Username" autofocus>
               <input type="text" name="username2" placeholder="Username wiederholen">
            </div>
            <div>
               <input type="email" name="email1" placeholder="E-Mail Adresse">
               <input type="email" name="email2" placeholder="E-Mail Adresse wiederholen">
            </div>
            <div>
               <input type="password" name="pw1" placeholder="Passwort">
               <input type="password" name="pw2" placeholder="Passwort wiederholen">
            </div>
            <div>
               <input type="text" name="vorname" placeholder="Vorname">
               <input type="text" name="nachname" placeholder="Nachname">
            </div>
            <div>
               <input name="alter" type="number" min="1" max="120" step="1">
               <span>Jahre</span>
            </div>
            <div>
               <input type="text" name="studiengang" placeholder="Studiengang">
            </div>
         </form>
      </div>

Mal wieder ein schönes Beispiel wie mit falsch verwendetem CSS Probleme geschaffen werden, die es eigentlich überhaupt nicht gibt.

Jetzt brauchst / darfst du halt nur CSS verwenden, dass diese Anordnung nicht stört, um die Optik noch geringfügig anzupassen.

Als Beispiel die folgende Datei ohne jegliches CSS für das Formular:

http://boratb.bplaced.net/index25.html

Als Grund-CSS reicht dann zum Beispiel erst mal:

Code:

      form>div {
         display: flex;
      }
      form>div>* {
         width: 15rem;
         padding: 0.3rem;
         border-radius: 0.2rem;
         margin: 0.5rem 1rem;
      }

Und als Ergebnis

http://boratb.bplaced.net/index26.html

Gruss

MrMurphy

SpiceLab · 13 Mai 2017

MrMurphy schrieb:
Lass alles CSS für das Formular weg, lass die p-Elemente weg, verzichte auf die falsche Verwendung von label-Elementen - und schon hast du die von dir gewünschte Anordnung:

Mal wieder ein schönes Beispiel wie mit falsch verwendetem CSS Probleme geschaffen werden, die es eigentlich überhaupt nicht gibt.

Zwei Blöde - ein Gedanke ;)

Bindl · 14 Mai 2017

MrMurphy schrieb:
Hallo

Von der benutzerfreundlichkeit her ist das Formular eine einzige Katastrophe. Wer nicht gezwungen ist das auszufüllen wird es lassen.

Hi,
danke erstmal für die Hilfe.
Da ich wahrlich neu bin in Sachen HTML, in diesem Fall mit Flask, würde ich gerne wissen wie das Formular besser oder benutzerfreundlicher aufzubauen wäre.
Könnten Sie mir das mal beispielhaft zeigen?

SpiceLab · 14 Mai 2017

Bindl schrieb:
Hi,
danke erstmal für die Hilfe.
Da ich wahrlich neu bin in Sachen HTML, in diesem Fall mit Flask, würde ich gerne wissen wie das Formular besser oder benutzerfreundlicher aufzubauen wäre.
Könnten Sie mir das mal beispielhaft zeigen?

Das (und vieles anderes) kann im Netz bei den einschlägig bekannten Quellen angeschaut u. studiert werden - wie z.B.

SELFHTML:

W3SCHOOLS:

https://www.w3schools.com/html/html_forms.asp - HTML
https://www.w3schools.com/html/html_form_elements.asp - HTML
https://www.w3schools.com/html/html_form_input_types.asp - HTML
https://www.w3schools.com/html/html_form_attributes.asp - HTML
https://www.w3schools.com/css/css_form.asp - CSS

Wer diese -und weitere- Quellen (noch) nicht kennt, findet über Google ganz leicht den Weg zu ihnen.

Formulare richtig anordnen

Bindl

Neues Mitglied

Anhänge

SpiceLab

Mod | ZENmechanic

MrMurphy

Senior HTML'ler

SpiceLab

Mod | ZENmechanic

Bindl

Neues Mitglied

SpiceLab

Mod | ZENmechanic

Neueste Beiträge