Formular gestalten

[Carmen]

Hallo,

ist es möglich mein HTML Formular http://codepen.io/anon/pen/grjbym ohne weiteren Klassen zu gestalten?

Die Felder sollten später folgendermaßen aussehen:

1. Name, Mail Adresse und Rückrufnummer in einer Zeile, das Label immer über dem Feld.
2. Darunter das große Textfeld, welches die volle Breite einnehmen darf, das Label wieder über dem Feld.
3. Unter dem Textfeld die letzten zwei Felder, wieder nebeneinander und auch hier das Label oberhalb den Feldern.

Sollte mein HTML nicht richtig sein, immer her mit den Ideen / Lösungen. Bin für alles dankbar. Ach ja sollte dieses noch wichtig sein, im responsiven Design (Handy) sollten die Felder folgendermaßen angeordnet sein

1. Name
2. Mail Adresse
3. Rückrufnummer
4. Nachricht
5. Budget
6. Terminplanung

[Der Martin]

Hi,

ist es möglich mein HTML Formular http://codepen.io/anon/pen/grjbym ohne weiteren Klassen zu gestalten?

was meinst du mit "ohne weitere Klassen"? Meinst du HTML-Klassen, auf die du mit einem CSS-Selektor aufsetzen kannst?
Nur zum Stylen allein brauchst du eigentlich gar keine Klassen, denn über die ID, die die Felder ja wegen des Labels sowieso haben sollten, ist jedes eindeutig ansprechbar. Die IDs fehlen dir übrigens noch, die Labels haben daher keinen Bezug.
Eine Gliederung durch fieldsets könnte noch mehr Struktur hineinbringen.

1. Name, Mail Adresse und Rückrufnummer in einer Zeile, das Label immer über dem Feld.

Also entweder ein gemeinsames fieldset für alle drei zusammen, und je ein div-Container für die zusammengehörenden Labels und Eingabefelder, oder drei separate fieldsets mit je einem Pärchen. Die drei Blöcke dann mit display:inline-block horizontal angeordnet.
Was ist bei schmalen Browserfenstern? Mit inline-block würden die Blöcke dann untereinander rutschen, wie gewünscht.

1. Darunter das große Textfeld, welches die volle Breite einnehmen darf, das Label wieder über dem Feld.

Also ein fieldset in Default-Formatierung (display:block), das Label und Eingabefeld enthält.

1. Unter dem Textfeld die letzten zwei Felder, wieder nebeneinander und auch hier das Label oberhalb den Feldern.

Siehe oben.

Sollte mein HTML nicht richtig sein, immer her mit den Ideen / Lösungen.

Es gibt oft kein klares Richtig oder Falsch; stattdessen gibt es oft mehrere Möglichkeiten. Ich habe eine Strukturierung borgeschlagen; du hast bisher gar keine.

So long,
 Martin

[Carmen]

Hallo Martin,

vielen Dank für deine Antwort. Ich setzte mich an die Umsetzung deiner Vorschläge. Sobald ich mein HTML bearbeitet habe, melde ich mich wieder.

[Der Martin]

Hallo,

Ich setzte mich an die Umsetzung deiner Vorschläge.

ich würde an deiner Stelle erstmal noch eine zweite oder gar dritte Meinung abwarten. ;-)

So long,
 Martin

[Carmen]

Hallo Martin,

ich würde an deiner Stelle erstmal noch eine zweite oder gar dritte Meinung abwarten. ;-)

OK :) Die ids habe ich bereits hinzugefügt: http://codepen.io/anon/pen/grjbym

[pl]

Hallo,

Ich setzte mich an die Umsetzung deiner Vorschläge.

ich würde an deiner Stelle erstmal noch eine zweite oder gar dritte Meinung abwarten. ;-)

Ok, hier ist mein Borschlag, ähnlich Deiner: Fieldset/Legend/Label und alles übereinander so wie hier und das tut auch in sehr kleinen Fenstern. Die Organisation der CSS-Klassen ist natürlich Deine Sache.

[Carmen]

Hallo,

Ok, hier ist mein Borschlag, ähnlich Deiner: Fieldset/Legend/Label und alles übereinander so wie hier und das tut auch in sehr kleinen Fenstern. Die Organisation der CSS-Klassen ist natürlich Deine Sache.

danke für deinen Vorschlag. Dieser kommt für mich leider nicht in Frage, da ich es nicht schön finde wenn alle Felder untereinander stehen.

[pl]

Hallo,

Ok, hier ist mein Borschlag, ähnlich Deiner: Fieldset/Legend/Label und alles übereinander so wie hier und das tut auch in sehr kleinen Fenstern. Die Organisation der CSS-Klassen ist natürlich Deine Sache.

danke für deinen Vorschlag. Dieser kommt für mich leider nicht in Frage, da ich es nicht schön finde wenn alle Felder untereinander stehen.

Aufm Handy wird Dir nichts weiter übrigbleiben.

[Carmen]

Hallo,

Aufm Handy wird Dir nichts weiter übrigbleiben.

hast du meinen ersten Beitrag nicht ganz gelesen? Da schreibe ich, dass es auf dem Handy oder auf kleinen Bildschirmen ruhig untereinander stehen darf, aber nicht wenn genug Platz da ist. Auf der von dir verlinken Seite sind die Textfelder meiner Meinung nach viel zu lange.

[pl]

Hallo,

Aufm Handy wird Dir nichts weiter übrigbleiben.

hast du meinen ersten Beitrag nicht ganz gelesen? Da schreibe ich, dass es auf dem Handy oder auf kleinen Bildschirmen ruhig untereinander stehen darf, aber nicht wenn genug Platz da ist. Auf der von dir verlinken Seite sind die Textfelder meiner Meinung nach viel zu lange.

Dann empfehle ich Media-Queries.

[Gunnar Bittersmann]

@@pl

danke für deinen Vorschlag. Dieser kommt für mich leider nicht in Frage, da ich es nicht schön finde wenn alle Felder untereinander stehen.

Aufm Handy wird Dir nichts weiter übrigbleiben.

Das sagte Carmen bereits im OP.

Ich glaube, du hast nicht aufmerksam genug gelesen.

Ich glaube, ich habe ein Déjà-vu.

LLAP 🖖

[Gunnar Bittersmann]

@@pl

Ok, hier ist mein Borschlag, ähnlich Deiner: Fieldset/Legend/Label und alles übereinander so wie hier und das tut auch in sehr kleinen Fenstern.

Aber nicht in großen. Kann man machen, ist dann aber Kacke.

Die Organisation der CSS-Klassen ist natürlich Deine Sache.

Da gibt es nicht zu organisieren. Es gibt keine CSS-Klassen.

LLAP 🖖

[Felix Riesterer]

Liebe Carmen,

ist es möglich mein HTML Formular http://codepen.io/anon/pen/grjbym ohne weiteren Klassen zu gestalten?

ja. Dazu nimmt man dann Selektoren, die darauf ansetzen, dass das zu gestaltende Element ein Kindelement eines bestimmten anderen Elements ist. Oder wenigstens ein Nachfahre.

1. Name, Mail Adresse und Rückrufnummer in einer Zeile, das Label immer über dem Feld.
2. Darunter das große Textfeld, welches die volle Breite einnehmen darf, das Label wieder über dem Feld.
3. Unter dem Textfeld die letzten zwei Felder, wieder nebeneinander und auch hier das Label oberhalb den Feldern.

Keine Ahnung, ob ich das so richtig verstanden habe, aber das wäre ein einfacher Entwurf: [codepen]

Liebe Grüße,

Felix Riesterer.

[Carmen]

Hallo Felix,

Keine Ahnung, ob ich das so richtig verstanden habe, aber das wäre ein einfacher Entwurf: [codepen]

danke auch dir für dein Beispiel. Leider hast du mich nicht ganz richtig verstanden. Wenn ich mir dein Beispiel anschaue dann geht es in Richtung http://gaststaettenkritik.de/gastin.html und genau dieses wollte ich ja nicht, die Felder werden irgendwann viel zu lange.

@MrMurphy1 hat genau verstanden was ich meinte :) http://boratb.bplaced.net/index8.html schön ist auch am Beispiel, dass ich kein weiteres HTML einfügen muss.

[MrMurphy1]

Hallo

ist es möglich mein HTML Formular ohne weiteren Klassen zu gestalten?

Ja. Ich habe mal ein Beispiel-CSS erstellt, dass ohne Änderungen an deinem zweiten Quelltext funktioniert:

      #anfrage-startseite {
         width: 96%;
         margin: 1rem;
         display: flex;
         flex-wrap: wrap;
      }
      #anfrage-startseite :nth-child(1),
      #anfrage-startseite :nth-child(3),
      #anfrage-startseite :nth-child(5) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 26%;
         order: 1;
      }
      #anfrage-startseite :nth-child(2),
      #anfrage-startseite :nth-child(4),
      #anfrage-startseite :nth-child(6) {
         margin-bottom: 1rem;
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 26%;
         order: 2;
      }
      #anfrage-startseite :nth-child(7) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 100%;
         order: 3;
      }
      #anfrage-startseite :nth-child(8) {
         margin-right: 1rem;
         margin-bottom: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 100%;
         order: 3;
      }
      #anfrage-startseite :nth-child(9),
      #anfrage-startseite :nth-child(11) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 34%;
         order: 4;
      }
      #anfrage-startseite :nth-child(10),
      #anfrage-startseite :nth-child(12) {
         margin-right: 1rem;
         margin-bottom: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(50% - 1rem);
         order: 5;
      }
      #anfrage-startseite :nth-child(13) {
         margin-right: 1rem;
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: auto;
         order: 6;
      }
   }
   @media only screen and (max-width: 750px) {
      #anfrage-startseite {
         width: 98%;
         padding: 0.5rem;
         margin: 1rem 0;
      }
      #anfrage-startseite :nth-child(1n+1) {
         margin-right: 0;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 51%;
         order: 0;
      }
   }

Weitere Anpassungen sind natürlich noch möglich und sinnvoll.

Und noch mal der gesamte Quelltext:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Formular Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      #anfrage-startseite {
         width: 96%;
         margin: 1rem;
         display: flex;
         flex-wrap: wrap;
      }
      #anfrage-startseite :nth-child(1),
      #anfrage-startseite :nth-child(3),
      #anfrage-startseite :nth-child(5) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 26%;
         order: 1;
      }
      #anfrage-startseite :nth-child(2),
      #anfrage-startseite :nth-child(4),
      #anfrage-startseite :nth-child(6) {
         margin-bottom: 1rem;
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 26%;
         order: 2;
      }
      #anfrage-startseite :nth-child(7) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 100%;
         order: 3;
      }
      #anfrage-startseite :nth-child(8) {
         margin-right: 1rem;
         margin-bottom: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 100%;
         order: 3;
      }
      #anfrage-startseite :nth-child(9),
      #anfrage-startseite :nth-child(11) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 34%;
         order: 4;
      }
      #anfrage-startseite :nth-child(10),
      #anfrage-startseite :nth-child(12) {
         margin-right: 1rem;
         margin-bottom: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(50% - 1rem);
         order: 5;
      }
      #anfrage-startseite :nth-child(13) {
         margin-right: 1rem;
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: auto;
         order: 6;
      }
   }
   @media only screen and (max-width: 750px) {
      #anfrage-startseite {
         width: 98%;
         padding: 0.5rem;
         margin: 1rem 0;
      }
      #anfrage-startseite :nth-child(1n+1) {
         margin-right: 0;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 51%;
         order: 0;
      }
   }

   </style>
</head>
<body>
   <section>

      <form action="" id="anfrage-startseite">

         <label for="name">Ihr Name <span class="req">*</span></label>
         <input type="text" name="name" id="name" value="" required>

         <label for="mail">Ihre E-Mail Adresse <span class="req">*</span></label>
         <input type="email" name="mail" id="mail" value="" required>

         <label for="telefon">Ihre Rückrufnummer</label>
         <input type="tel" name="telefon" id="telefon" value="">

         <label for="nachricht">Ihre Anfrage</label>
         <textarea name="nachricht" id="nachricht" required></textarea>

         <label for="budget">Wie hoch ist das Budget?</label>
         <select name="budget" id="budget">
            <option value="">Bitte auswählen</option>
            <option value="500€ - 1.000€">500€ - 1.000€</option>
            <option value="1.000€ - 2.000€">1.000€ - 2.000€</option>
            <option value="2.000€ - 3.500€">2.000€ - 3.500€</option>
            <option value="3.500€ - 5.000€">3.500€ - 5.000€</option>
            <option value="5.000€ - 6.500€">5.000€ - 6.500€</option>
            <option value="6.500€ - 8.500€">6.500€ - 8.500€</option>
            <option value="10.000€+">10.000€+</option>
         </select>

         <label for="terminplanung">Terminplanung?</label>
         <select name="terminplanung" id="terminplanung">
            <option value="">Bitte auswählen</option>
            <option value="Sofort">Sofort</option>
            <option value="In den nächsten 4 Wochen">In den nächsten 4 Wochen</option>
            <option value="In den nächsten 2 Monaten">In den nächsten 2 Monaten</option>
            <option value="3 Monate - 4 Monate">3 Monate - 4 Monate</option>
            <option value="5 Monate und mehr...">5 Monate und mehr...</option>
         </select>

         <button type="button" id="anfrage-abschicken">Anfrage abschicken</button>

      </form>

   </section>
</body>
</html>

Und kurzzeitig noch mal auf meinem Testaccount zum direkten Ausprobieren:

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

Gruss

MrMurphy

[Carmen]

Hallo

Ja. Ich habe mal ein Beispiel-CSS erstellt, dass ohne Änderungen an deinem zweiten Quelltext funktioniert:

wow, vielen Dank für dein Beispiel. Genau so habe ich es mir vorgestellt. Meine weitere Version wäre so gewesen http://codepen.io/anon/pen/grjbym

In deinem Beispiel muss ich natürlich wie du schon richtig geschrieben hast ein paar Anpassungen vornehmen aber der Grundaufbau schaut top aus.

Edit: Bevor ich weiter arbeite, darf ich deinen Code für meine weiteren Versuche nutzen?

[Matthias Apsel]

Hallo MrMurphy1,

Strukturelle Pseudoklassen sind wenig robust gegenüber Änderungen im HTML. Sie so exzessiv zu verwenden, ist selten eine gute Idee.

Bis demnächst
Matthias

[Carmen]

Hallo Matthias,

Strukturelle Pseudoklassen sind wenig robust gegenüber Änderungen im HTML. Sie so exzessiv zu verwenden, ist selten eine gute Idee.

es funktioniert wunderbar. Das Ergebnis ist genau so, wie ich es mir vorgestellt habe. Außerdem hat es den Vorteil, dass ich nichts am Quelltext ändern musste. Was könnte denn im schlimmsten Fall passieren?

[Gunnar Bittersmann]

@@Carmen

Strukturelle Pseudoklassen sind wenig robust gegenüber Änderungen im HTML. Sie so exzessiv zu verwenden, ist selten eine gute Idee.

Was könnte denn im schlimmsten Fall passieren?

Du könntest von den ersten drei Eingabefeldern eins mitsamt zugehörigem Label entfernen wollen oder dort ein weiteres hinzufügen … und schon passt das Stylesheet überhaupt nicht mehr; du musst alles neu durchzählen.

Also bei einer Änderung des Inhalts nicht nur das Markup, sondern auch das Stylesheet ändern. Separation of concerns geht anders; Wartbarkeit geht anders.

LLAP 🖖

[Carmen]

Hallo,

Also bei einer Änderung des Inhalts nicht nur das Markup, sondern auch das Stylesheet ändern. Separation of concerns geht anders; Wartbarkeit geht anders.

damit kann ich leben, wenn ich dafür den Code nicht anpassen muss. Außerdem ist es meine eigene Seite also kann ich sehr gut abschätzen wie oft so ein Formular angepasst wird, bzw. warum sollte es später überhaupt angepasst werden? Ich sehe kein Grund dafür.

[MrMurphy1]

Hallo

Was könnte denn im schlimmsten Fall passieren?

Laß dir keine Angst machen. Über Selektoren beziehungsweise Strukturelle Pseudoklassen wird leider viel Unsinn geschrieben.

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

Über Selektoren beziehungsweise Strukturelle Pseudoklassen wird leider viel Unsinn geschrieben.

Das mag sein. Die beiden Beiträge, auf die du abzielst, zählen nicht dazu.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@MrMurphy1

Laß dir keine Angst machen. Über Selektoren beziehungsweise Strukturelle Pseudoklassen wird leider viel Unsinn geschrieben.

Überlass das Sammeln von Minuspunkten in diesem Thread lieber Hotti! ;-)

LLAP 🖖

[Carmen]

Hallo MrMurphy,

Laß dir keine Angst machen. Über Selektoren beziehungsweise Strukturelle Pseudoklassen wird leider viel Unsinn geschrieben.

mach ich auch nicht :) Hab es in allen relevanten Browsern getestet und in allen schaut es gut aus.

[MrMurphy1]

Hallo

In meinem Beispiel gibt es einen Fehler, der mehrfach vorkommt. Das habe ich mal korrigiert und an einigen anderen Stellen Änderungen vorgenommen. Zunächst das korrgierte CSS:

#anfrage-startseite {
   width: 96%;
   margin: 1rem;
   display: flex;
   flex-wrap: wrap;
}
#anfrage-startseite>:nth-child(-2n+5) {
   margin-right: 1rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 26%;
   order: 1;
}
#anfrage-startseite>:nth-child(-2n+6) {
   margin-bottom: 1rem;
   margin-right: 1rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 26%;
   order: 2;
}
#anfrage-startseite>:nth-child(7) {
   margin-right: 1rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100%;
   order: 3;
}
#anfrage-startseite>:nth-child(8) {
   margin-right: 1rem;
   margin-bottom: 1rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100%;
   order: 3;
}
#anfrage-startseite>:nth-child(9),
#anfrage-startseite>:nth-child(11) {
   margin-right: 1rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 34%;
   order: 4;
}
#anfrage-startseite>:nth-child(10),
#anfrage-startseite>:nth-child(12) {
   margin-right: 1rem;
   margin-bottom: 1rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: calc(50% - 1rem);
   order: 5;
}
#anfrage-startseite>:nth-child(13) {
   margin-right: 1rem;
   flex-grow: 0;
   flex-shrink: 1;
   flex-basis: auto;
   order: 6;
}

Und noch mal die korrigierte gesamte Seite:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Formular Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      #anfrage-startseite {
         width: 96%;
         margin: 1rem;
         display: flex;
         flex-wrap: wrap;
      }
      #anfrage-startseite>:nth-child(-2n+5) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 26%;
         order: 1;
      }
      #anfrage-startseite>:nth-child(-2n+6) {
         margin-bottom: 1rem;
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 26%;
         order: 2;
      }
      #anfrage-startseite>:nth-child(7) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 100%;
         order: 3;
      }
      #anfrage-startseite>:nth-child(8) {
         margin-right: 1rem;
         margin-bottom: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 100%;
         order: 3;
      }
      #anfrage-startseite>:nth-child(9),
      #anfrage-startseite>:nth-child(11) {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 34%;
         order: 4;
      }
      #anfrage-startseite>:nth-child(10),
      #anfrage-startseite>:nth-child(12) {
         margin-right: 1rem;
         margin-bottom: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(50% - 1rem);
         order: 5;
      }
      #anfrage-startseite>:nth-child(13) {
         margin-right: 1rem;
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: auto;
         order: 6;
      }
   }
   @media only screen and (max-width: 750px) {
      #anfrage-startseite {
         width: 98%;
         padding: 0.5rem;
         margin: 1rem 0;
      }
      #anfrage-startseite>:nth-child(-1n+12) {
         margin-right: 0;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 100%;
         order: 0;
      }
      #anfrage-startseite>:nth-child(13) {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: auto;
      }
   }

   </style>
</head>
<body>
   <section>

      <form action="" id="anfrage-startseite">

         <label for="name">Ihr Name <span class="req">*</span></label>
         <input type="text" name="name" id="name" value="" required>

         <label for="mail">Ihre E-Mail Adresse <span class="req">*</span></label>
         <input type="email" name="mail" id="mail" value="" required>

         <label for="telefon">Ihre Rückrufnummer</label>
         <input type="tel" name="telefon" id="telefon" value="">

         <label for="nachricht">Ihre Anfrage</label>
         <textarea name="nachricht" id="nachricht" required></textarea>

         <label for="budget">Wie hoch ist das Budget?</label>
         <select name="budget" id="budget">
            <option value="">Bitte auswählen</option>
            <option value="500€ - 1.000€">500€ - 1.000€</option>
            <option value="1.000€ - 2.000€">1.000€ - 2.000€</option>
            <option value="2.000€ - 3.500€">2.000€ - 3.500€</option>
            <option value="3.500€ - 5.000€">3.500€ - 5.000€</option>
            <option value="5.000€ - 6.500€">5.000€ - 6.500€</option>
            <option value="6.500€ - 8.500€">6.500€ - 8.500€</option>
            <option value="10.000€+">10.000€+</option>
         </select>

         <label for="terminplanung">Terminplanung?</label>
         <select name="terminplanung" id="terminplanung">
            <option value="">Bitte auswählen</option>
            <option value="Sofort">Sofort</option>
            <option value="In den nächsten 4 Wochen">In den nächsten 4 Wochen</option>
            <option value="In den nächsten 2 Monaten">In den nächsten 2 Monaten</option>
            <option value="3 Monate - 4 Monate">3 Monate - 4 Monate</option>
            <option value="5 Monate und mehr...">5 Monate und mehr...</option>
         </select>

         <button type="button" id="anfrage-abschicken">Anfrage abschicken</button>

      </form>

   </section>
</body>
</html>

Gruss

MrMurphy

[Carmen]

Hallo,

wollte euch meine Lösung vorstellen, nicht dass ihr denkt ich suche nur nach fertigen Lösungen bzw. nach einem fertigen Code. Vielleicht könnt ihr dazu noch kurz etwas sagen.

http://codepen.io/anon/pen/GZBmgW

Ein Absende-Button über die ganze Breite gehen zu lassen finde ich etwas unschön, oder was meint ihr? Vielleicht lieber links- bzw. rechts zentriert oder gar mittig?

[Gunnar Bittersmann]

@@Carmen

Vielleicht könnt ihr dazu noch kurz etwas sagen.

http://codepen.io/anon/pen/GZBmgW

Wozu <div class="flex-wrapper">? Mit dem fieldset hast du bereits ein Container-Element.

Das andere fieldset um „Ihre Anfrage“ gruppiert Label und Eingabefeld; aber nicht mehrere Eingabefelder. Dafür wäre wohl div angebrachter (wie bei den anderen Label/Eingabefeld-Paaren).

Ein Absende-Button über die ganze Breite gehen zu lassen finde ich etwas unschön, oder was meint ihr?

Bis zu einer bestimmten Breite kann das durchaus sinnvoll sein:

@media (max-width: 15em)
{
  button
  {
    width: 100%;
  }
}

Vielleicht lieber links- bzw. rechts zentriert oder gar mittig?

So, dass es zum Rest der Seite/Website passt.

LLAP 🖖

[Carmen]

Hallo,

Wozu <div class="flex-wrapper">? Mit dem fieldset hast du bereits ein Container-Element.

wenn ich <div class="flex-wrapper"> weg nehme und mein CSS

fieldset {

    display: flex;
    flex-direction: row;
    justify-content: space-between;   
    align-items: stretch;
    border: none;
}

fieldset > div {
    flex: 1 1 auto;
}

anpasse werden alle Felder untereinander angezeigt. Deshalb auch das zusätzliche DIV

[MrMurphy1]

Hallo

Hallo

Ein Absende-Button über die ganze Breite gehen zu lassen finde ich etwas unschön, oder was meint ihr? Vielleicht lieber links- bzw. rechts zentriert oder gar mittig?

Stimmt. Aber das kannst du mit flexbox ja beliebig einstellen.

Ich habe mal ein neues Beispiel erstellt und dabei besonders auf die Benutzerfreundlichkeit geachtet.

Pflichtfelder sollten nach Möglichkeit vermieden werden. Wenn Besucher bestimmte Daten nicht übermitteln wollen senden sie Falschangaben. Da die meist nicht erkannt werden können ist es besser statt dessen leere Felder zu erhalten. Dann weiß man wenigstens woran man ist.

Außerdem habe ich die Schrift etwas vergrößert. Zu den Top 10 der größten Ärgernisse auf Webseiten zählt seit über 20 Jahren zu kleine Schrift.

Weiterhin zählen die Elemente von Formularen zu denen, die die Browser selbst nach eignen Vorgaben anzeigen. Deshalb sollte grade bei Formularen eine Normaliersung durchgeführt werden. Dann ist die Chance am größten, dass die Browser die eigenen Formatierungen auch umsetzen.

Die SVG-Icons habe ich von Google heruntergeladen:

http://t3n.de/news/google-material-design-icons-573630/

https://github.com/google/material-design-icons/releases/tag/1.0.0

Es gibt aber auch viele andere Anbieter wie

Iconmonstr

Hier der Link zu meinem Beispiel, dass ich zeitweise auf meinem Testaccount bereitstelle:

Benutzerfreundliches Formular

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Pflichtfelder sollten nach Möglichkeit vermieden werden.

Die Vermeidung von Pflichtfeldern sollte aber auch vermieden werden.

E-Mail und Nachricht wären in diesem Fall Pflichtfelder.

Weiterhin zählen die Elemente von Formularen zu denen, die die Browser selbst nach eignen Vorgaben anzeigen. Deshalb sollte grade bei Formularen eine Normaliersung durchgeführt werden.

Wenn du Eingabefelder und Button ihrer vom Browser vorgesehenen Kennzeichnung des :focus-Status beraubst, sorge dafür, dass dieser anderweitig deutlich erkennbar ist. Beim Button finde ich den Farbunterschied etwas gering.

Hier der Link zu meinem Beispiel, dass ich zeitweise auf meinem Testaccount bereitstelle:

Was zukünftigen Lesern dieses Threads im Archiv ungemein weiterhilft …

Warum lässt du das Beispiel nicht permanent? Oder warum nutzt du nicht Plattformen wie Codepen? Zumal der Leser dann Quelltext und Resultat auf einen Blick sieht. Und einfach Werte verändern kann.

Benutzerfreundliches Formular

<section> <h2>…</h2> <p>…</p> </section> <form …>: Das Formular gehört mit zu dem Abschnitt, also mit ins section-Element.

Ein einziges section-Element <body> <section> … </section> </body> macht aber keinen Sinn – kann weg. Dafür wäre evtl. das main-Element angebracht.

<form …> <fieldset> … </fieldset> </form>: Ein fieldset-Element übers ganze Formular zu legen macht keinen Sinn – kann weg.

<button type="button" id="abschicken">Anfrage abschicken</button>: Der Button schickt nichts ab. Das sollte wohl type="submit" heißen (oder – da Default – ganz wegfallen).

Was sollen eigentlich die ganzen @media all-Blöcke im Stylesheet?

Und was soll -moz-box-sizing: content-box und -webkit-box-sizing: content-box?

Dass Selektoren wie .formlayout>:nth-child(4) gefährlich sind, hatten wir schon desöfteren besprochen.

Dass einige Größenangaben besser in em statt rem anzugeben sind, das auch.

Und dass media queries besser in em statt in px anzugeben sind, das auch.

LLAP 🖖

[Gunnar Bittersmann]

@@MrMurphy1

Benutzerfreundliches Formular

Bei dir ist links keine Flucht; das sieht ziemlich unschön aus.

bei kleinen Viewports | bei größeren Viewports |

LLAP 🖖

[Carmen]

Hallo,

ich möchte gerne in meine Felder ein Icon setzten. Dieses habe ich erstmal so umgesetzt: http://codepen.io/anon/pen/GZBmgW.

Jetzt möchte ich gerne nach dem Icon ein Border hinzufügen, dass es ein bisschen abgetrennt steht und dem ganzen einen Hintergrund zuordnen.

Wenn ich ein border-right hinzufüge wird dieser ans Ende des Felder platziert und nicht wie gewünscht nach dem Icon.

Muss ich dem Icon ein eigenes DIV verpassen?

[Gunnar Bittersmann]

@@Carmen

Jetzt möchte ich gerne nach dem Icon ein Border hinzufügen, dass es ein bisschen abgetrennt steht und dem ganzen einen Hintergrund zuordnen.

Wenn ich ein border-right hinzufüge wird dieser ans Ende des Felder platziert und nicht wie gewünscht nach dem Icon.

Muss ich dem Icon ein eigenes DIV verpassen?

Nein. Du kannst die vertikale Linie und die Hintergrundfarbe für den Bereich des Icons mit einem Gradienten machen.

Was ich noch gemacht habe: SVG fürs Icon.

Deine PNG-Datei fürs Icon ist mit 512 × 512 Pixeln und 7 kB viel zu groß. Die solltest du im Bildverarbeitungsprogramm deiner Wahl auf die tatsächlich benötigte(n) Größe(n) runterrechnen. (Plural wegen hochauflösender Displays.)

Oder doch besser das für Icons geeignete Format verwenden: SVG. Ich hab deine PNG-Datei mal durch diesen Konverter gejagt: raus kommen 1257 Bytes. Wenn ich das SVG selber schreibe, würde ich bei diesem Brief-Icon schätzungsweise auf 200 bis 300 Bytes kommen.

Außerdem ist die Vektorgrafik bei jeder Größe scharf. Und wie man im Beispiel sieht, klappt’s auch problemlos mit der Hintergrungfarbe, was bei einer PNG-8-Rastergrafik auch nicht der Fall ist.

LLAP 🖖