Formular - Felder anordnen

[Bernd]

Guten Morgen,

es geht um folgendes Formular

Hier möchte ich gerne Name und Mail Adresse nebeneinander anordnen. Die restlichen Felder untereinander. Geht das ohne zusätzlichem HTML?

Zweitens sehe ich immer mal wieder wenn ich in ein Feld rein klicke, dass dann die Bezeichnungen nach oben rutschen, ich weiß nicht wie das heißt und wie ich dieses einbauen könnte. Benötige ich dann zusätzlich Labels?

<div class="contact-form">
    <form>
        <div>
            <input type="text" name="name" placeholder="Name" class="contact-textbox">
        </div>
        <div>
            <input type="email" name="email" placeholder="eMail Adresse" class="contact-textbox">
        </div>
        <div>
            <input type="text" name="betreff" placeholder="Betreff" class="contact-textbox">
        </div>
        <div>
            <textarea name="nachricht" placeholder="Nachricht" class="contact-textbox"></textarea>
            <input type="submit" name="message" value="Nachricht abschicken" class="contact-button">
        </div>		
    </form>
</div>  

Hier ein kleines Online-Beispiel:
https://jsfiddle.net/wjz5rzrw/

[Felix Riesterer]

Lieber Bernd,

in Deinem Quältext sehe ich vor lauter div keinen vernünftigen Code. Man benutzt im Allgemeinen ein div-Element, um mehrere(!) Block(!)-Elemente zu gruppieren. In Deinem Beispiel sehe ich die "Zeilen" als div realisiert, obwohl es darin nur ein einziges Element gibt - und dazu noch ein Inline-Element!

Was Du offensichtlich nicht bedacht hast, sind die für Eingabe-Elemente unbedingt notwendigen Beschriftungen. Das Schöne an diesen zusätzlichen Elementen ist, dass man sie mit CSS dazu nutzen kann, Deine gewünschte Darstellung zu erreichen, vor allem, wenn man verschachtelt!

<p>
  <label>
    Name:
    <input name="name">
  </label>
</p>

Wenn Du jetzt das label auf display:block und automatische Breite schaltest (praktisch ist das dann 100%), ihm anstelle des bisherigen div-Elements den unteren Rahmen gibst, dann sollte die Darstellung wieder so aussehen, wie Du das wolltest.

Natürlich kann so ein label ein for-Attribut tragen, welches man mit CSS "anfassen" kann:

<label for="der-name">
  <input id="der-name" name="name">
</label>

[for="der-name"] {
  width: 49%;
}

So kannst Du Deine beiden Eingabefelder, die nebeneinander stehen sollen, in ein gemeinsames Elternelement (ich wähle p) setzen und mittels oben gezeigtem for-Attribut in ihrer Breite passend reduzieren, damit es mit dem Platz klappt.

Liebe Grüße,

Felix Riesterer.

[Bernd]

Hallo Felix,

danke für deine Erklärung. Leider ist damit mein Problem nicht gelöst sondern es taucht gleich wieder ein weiteres Problem auf. Wenn ich ein Label einblende dann habe ich ein weiteres unnötiges Wort auf meiner Seite, welches ich nicht haben möchte. Gibt es denn keine andere Möglichkeit?

Ist das gültiges HTML

<form>
    <label for="name">
        <input type="text" id="name" name="name" placeholder="Name" class="contact-textbox">
    </label>

    <label for="email">
        <input type="email" id="email" name="email" placeholder="eMail Adresse" class="contact-textbox">
    </label>
                           
    <label for="text">
        <input type="text" id="text" name="text" placeholder=Betreff" class="contact-textbox">
    </label>

    <label for="betreff">
        <input type="text" id="betreff" name="betreff" placeholder="Betreff" class="contact-textbox">
    </label>

    <label for="nachricht">
        <textarea name="nachricht" placeholder="Nachricht" class="contact-textbox"></textarea>
    </label>
                            
    <input type="submit" name="message" value="Nachricht abschicken" class="contact-button">
                                
</form>

[Felix Riesterer]

Lieber Bernd,

danke für deine Erklärung.

gern geschehen.

Leider ist damit mein Problem nicht gelöst

Dann hast Du meine Vorschläge nicht so umgesetzt, wie ich es beschrieben habe.

Wenn ich ein Label einblende dann habe ich ein weiteres unnötiges Wort auf meiner Seite, welches ich nicht haben möchte.

Wiebitte?? Kannst Du das genauer beschreiben oder besser gleich in Deinem Fiddle vorführen? Im ersten Moment klang das für mich wie barer Unsinn...

Gibt es denn keine andere Möglichkeit?

...

Ist das gültiges HTML

<form>
    <label for="name">
        <input type="text" id="name" name="name" placeholder="Name" class="contact-textbox">
    </label>

    <label for="email">
        <input type="email" id="email" name="email" placeholder="eMail Adresse" class="contact-textbox">
    </label>
                           
    <label for="text">
        <input type="text" id="text" name="text" placeholder=Betreff" class="contact-textbox">
    </label>

    <label for="betreff">
        <input type="text" id="betreff" name="betreff" placeholder="Betreff" class="contact-textbox">
    </label>

    <label for="nachricht">
        <textarea name="nachricht" placeholder="Nachricht" class="contact-textbox"></textarea>
    </label>
                            
    <input type="submit" name="message" value="Nachricht abschicken" class="contact-button">
                                
</form>

Meines Wissens ist es gültig, aber nicht semantisch. Wenn Du im Browser die Darstellung auf "ohne Stil" schaltest, wirst Du merken, dass es nur schwer benutzbar ist. Und das placeholder-Attribut ist keine sinnvolle Beschriftung. Diese gehört ins label-Element!

Liebe Grüße,

Felix Riesterer.

[Bernd]

Hallo Felix,

Dann hast Du meine Vorschläge nicht so umgesetzt, wie ich es beschrieben habe.

Ich habe es jetzt so umgesetzt

<form>
    <label for="name">
        <input type="text" id="name" name="name" placeholder="Name" class="contact-textbox">
    </label>

    <label for="email">
        <input type="email" id="email" name="email" placeholder="eMail Adresse" class="contact-textbox">
    </label>
                           
    <label for="text">
        <input type="text" id="text" name="text" placeholder=Betreff" class="contact-textbox">
    </label>

    <label for="betreff">
        <input type="text" id="betreff" name="betreff" placeholder="Betreff" class="contact-textbox">
    </label>

    <label for="nachricht">
        <textarea name="nachricht" placeholder="Nachricht" class="contact-textbox"></textarea>
    </label>
                            
    <input type="submit" name="message" value="Nachricht abschicken" class="contact-button">
                                
</form>

[for="name"] {
  width: 48%;
  display: inline-block;
  margin-bottom: 1em;
  margin-top: 2em;
}

[for="email"] {
  width: 48%;
  display: inline-block;
  margin-left: 2em;
}

[for="betreff"] {
  margin-bottom: 2em;
  display: block;
}

Das ganze sieht dann so aus

Wiebitte?? Kannst Du das genauer beschreiben oder besser gleich in Deinem Fiddle vorführen? Im ersten Moment klang das für mich wie barer Unsinn...

Ich hätte meine Beschriftungen gerne in den Feldern um etwas platz zu sparen. Das Formular soll sehr minimalistisch rüber kommen. Hab auch vielen Seiten schon gesehen wenn man rein klickt wandert die Beschriftung nach oben und ich kann im Feld schreiben und weiß noch immer wo ich bin. Deshalb habe ich in meinem ersten Posting auch gefragt ob ich ein <label> benötige oder ob es auch anderes geht.

Meines Wissens ist es gültig, aber nicht semantisch. Wenn Du im Browser die Darstellung auf "ohne Stil" schaltest, wirst Du merken, dass es nur schwer benutzbar ist. Und das placeholder-Attribut ist keine sinnvolle Beschriftung. Diese gehört ins label-Element!

Zum Thema <label> habe ich gerade etwas geschrieben. Also ich soll um die Labels noch <p> leben? Dann habe ich doch wieder unnötiges HTML?

[Matthias Apsel]

Hallo Bernd,

<form>
    <label for="name">
        <input type="text" id="name" name="name" placeholder="Name" class="contact-textbox">
    </label>

Ein Beschriftung ohne Inhalt ist keine Beschriftung.

type="text" ist der Standardwert, kann deshalb meist weggelassen werden.

placeholder ist kein Ersatz für eine Beschriftung.

Ich hätte meine Beschriftungen gerne in den Feldern um etwas platz zu sparen.

https://wiki.selfhtml.org/wiki/CSS/Tutorials/zugängliche_Eingabefelder

Zum Thema <label> habe ich gerade etwas geschrieben.

Ja, allerdings Unsinn. Der Inhalt der label-Elemente dient der Beschriftung für Menschen, die auf assistive Technologien angewiesen sind. Für Sehende kannst du Beschriftung mit CSS verstecken.

Zum Beispiel so.

.visually-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden;
}

Also ich soll um die Labels noch <p> leben?

Nein, wie kommst du darauf?

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Der Inhalt der label-Elemente dient der Beschriftung für Menschen, die auf assistive Technologien angewiesen sind. Für Sehende kannst du Beschriftung mit CSS verstecken.

Zum Beispiel so.

.visually-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden;
}

Dazu darf allerdings das input-Element kein Kind des labels sein. Deshalb gibt es die Möglichkeit, die Zuordnung zwischen label und input über das for-Attribut zu treffen.

<label for="name">Name</label>
<input id="name">

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Matthias,

Also ich soll um die Labels noch <p> leben?

Nein, wie kommst du darauf?

weil es semantisch ist. Eine "Zeile" visuell gedacht, ist ein Block-Element strukturell gedacht. Und auch wenn es nahezu unmöglich ist, dass ein User nur mit dem Default-Stylesheet des Browsers die Seite oder das Formular zu sehen bekommt, so wären in diesem Falle die Zeilen noch immer Zeilen.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Matthias Apsel

Zum Thema <label> habe ich gerade etwas geschrieben.

Ja, allerdings Unsinn. Der Inhalt der label-Elemente dient der Beschriftung für Menschen, die auf assistive Technologien angewiesen sind.

Der Inhalt der label-Elemente dient der Beschriftung für alle Menschen. Auch für Sehende, die ebenso darauf angewiesen sind zu wissen, was sie denn in die Eingabefelder eintragen sollen.

Für Sehende kannst du Beschriftung mit CSS verstecken.

Auch du schreibst allerdings Unsinn. Wie sollen denn Sehende wissen, was sie in die Eingabefelder eintragen sollen, wenn die Beschriftung versteckt ist?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Der Inhalt der label-Elemente dient der Beschriftung für alle Menschen.

Ja.

Auch für Sehende, die ebenso darauf angewiesen sind zu wissen, was sie denn in die Eingabefelder eintragen sollen.

Für Sehende kannst du Beschriftung mit CSS verstecken.

Auch du schreibst allerdings Unsinn. Wie sollen denn Sehende wissen, was sie in die Eingabefelder eintragen sollen, wenn die Beschriftung versteckt ist?

Für Sehende könnte man die Beschriftung anders realisieren. Nicht, dass man das tun sollte.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Bernd

Ich hätte meine Beschriftungen gerne in den Feldern

Dass das unsinnig ist, hatte ich gerade schon gesagt.

Es ist auch wenig relevant, was du gern hättest. Entscheidend ist, was die Nutzer deiner Seiten gerne hätten.

um etwas platz zu sparen.

Der Grund ist nichtig. Auf Webseiten gibt es keine Platznot. Du hast allen Platz der Welt – nutze ihn!

LLAP 🖖

[pl]

hi,

Hier möchte ich gerne Name und Mail Adresse nebeneinander anordnen. Die restlichen Felder untereinander. Geht das ohne zusätzlichem HTML?

Also eine Gruppierung. Dafür gibt es das <fieldset>-Element. Und die <label>-Elemente lassen sich hierzu vorteilhaft im <legend>-Element unterbringen.

Schönen Sonntag.

[Felix Riesterer]

Lieber pl,

Also eine Gruppierung.

nein, ein visuelles Nebeneinander. Nicht mehr und nicht weniger.

Dafür gibt es das <fieldset>-Element.

Das fieldset-Element eigent sich hervorragend, um komplexere Formulare sinnvoll zu strukturieren. Siehe Wiki.

Und die <label>-Elemente lassen sich hierzu vorteilhaft im <legend>-Element unterbringen.

Ich bin nicht sicher, ob Du den Sinn aller dieser Elemente auch wirklich verstanden hast...

Liebe Grüße,

Felix Riesterer.

[pl]

Ich bin nicht sicher, ob Du den Sinn aller dieser Elemente auch wirklich verstanden hast...

Arrogant!

[Christian Kruse]

Hallo pl,

Ich bin nicht sicher, ob Du den Sinn aller dieser Elemente auch wirklich verstanden hast...

Arrogant!

Du hast behauptet, die <label>-Elemente ließen sich „vorteilhaft im <legend>-Element unterbringen“ - das ist so abwegig, dass man sich zwangsläufig die Frage stellen muss, ob du das verstanden hast. Das ist nicht arrogant, es sieht von deiner Position aus nur so aus.

LG,
CK

[pl]

hi

Ich bin nicht sicher, ob Du den Sinn aller dieser Elemente auch wirklich verstanden hast...

Arrogant!

Du hast behauptet, die <label>-Elemente ließen sich „vorteilhaft im <legend>-Element unterbringen“ - das ist so abwegig, dass man sich zwangsläufig die Frage stellen muss, ob du das verstanden hast. Das ist nicht arrogant, es sieht von deiner Position aus nur so aus.

Was ich verstanden habe steht hier gar nicht zur Debatte. Ich machte hier nur einen Vorschlag und es steht jedem frei was er damit macht. Aber Du kannst hier gerne erklären warum es abwegig ist, das <label>-Element im <legend->Element unterzubringen. MfG

[Gunnar Bittersmann]

@@pl

Aber Du kannst hier gerne erklären warum es abwegig ist, das <label>-Element im <legend->Element unterzubringen.

legend ist die Beschriftung (Überschrift) für eine Gruppe von Eingabefeldern (fieldset).

label ist die Beschriftung für ein einzelnes Eingabefeld (input, textarea, …).

label in legend – also die Beschriftung eines einzelnen Eingabefeldes in der Beschriftung der Gruppe – ist wohl so abwegig, dass es die HTML-Spec nicht für nötig hält, das zu verbieten.

Wenn dir ein sinnvoller Anwendungsfall einfällt, lass es uns wissen.

LLAP 🖖

[pl]

hi,

label in legend – also die Beschriftung eines einzelnen Eingabefeldes in der Beschriftung der Gruppe – ist wohl so abwegig, dass es die HTML-Spec nicht für nötig hält, das zu verbieten.

Wenn dir ein sinnvoller Anwendungsfall einfällt, lass es uns wissen.

Wenn Fieldset nur ein einzelnes Inputfeld hat, könnte man auf diese Art und Weise Beschriftung und Label zusammenlegen. Das ist die Idee und ich denke schon daß das im Sinne der Verwendung dieser Elemente ist. Schließlich darf man auch Fieldset's ineinander schachteln und niemand schreibt irgendwo vor, daß eine Gruppe mehr als ein <input>Element enthalten muss. Darüber können wir gerne diskutieren, aber zu schreiben

Ich bin nicht sicher, ob Du den Sinn aller dieser Elemente auch wirklich verstanden hast…

Ohne weiteren Kommentar, das ist einfach nur arrogant.

MfG

[Gunnar Bittersmann]

@@pl

Wenn dir ein sinnvoller Anwendungsfall einfällt, lass es uns wissen.

Wenn Fieldset nur ein einzelnes Inputfeld hat

dann gruppiert das Fieldset nichts, also kein sinnvoller Anwendungsfall.

LLAP 🖖

[pl]

hi

Wenn dir ein sinnvoller Anwendungsfall einfällt, lass es uns wissen.

Wenn Fieldset nur ein einzelnes Inputfeld hat

dann gruppiert das Fieldset nichts, also kein sinnvoller Anwendungsfall.

Ok. Dann nehmen wir den zum <input>Feld gehörigen <button> mit ins <fieldset>. Immer noch abwegig?

MfG

[Gunnar Bittersmann]

@@pl

Wenn dir ein sinnvoller Anwendungsfall einfällt, lass es uns wissen.

Wenn Fieldset nur ein einzelnes Inputfeld hat

dann gruppiert das Fieldset nichts, also kein sinnvoller Anwendungsfall.

Ok. Dann nehmen wir den zum <input>Feld gehörigen <button> mit ins <fieldset>. Immer noch abwegig?

Ein Button gehört üblicherweise zum Fomular, nicht zu einem Eingabefeld.

Aber einer fällt mir da doch ein (wenn dir schon keiner einfällt) – der Passwort-anzeigen/verbergen-Button:

<label for="password">Passwort:</label>
<input id="password" name="password"/>
<button id="toggle-password-visibility">Passwort verbergen</button>

Das könnte man vielleicht in ein fieldset gruppieren (wenngleich das der UX in Screenreadern eher schadet als nutzt).

Dir schwebt dann sowas vor?

<fieldset>
	<legend>
		<label for="password">Passwort:</label>
	</legend>
	<input id="password" name="password"/>
	<button id="toggle-password-visibility">Passwort verbergen</button>
</fieldset>

LLAP 🖖

[pl]

hi,

Dir schwebt dann sowas vor?

Im Prinzip ja. Dafür gibt es ja das das for= Attribut im <label>-Element.

MfG

[Gunnar Bittersmann]

@@pl

Im Prinzip ja.

Die zwei selects und der Button sind die einzigen Eingabe-Elemente in dem Formular; da gibt’s nichts zu gruppieren. Jedenfalls nicht mit fieldset – sondern mit p (oder div).

IIRC lesen Screenreader bei jedem Eingabefeld eines fieldsets dessen legend mit vor. Das macht bei dir gar keinen Sinn. Weg mit den fieldsets!

Warum nicht ganz normal ein Label für jedes der beiden Felder?

„Bitte wählen Sie“ ist Vollmüllung der Seite, die wohl niemand braucht.

selects halte ich hier auch nicht für gute UI-Elemente. Für den Standort sollte es eine Combobox sein <input list="…"/>, damit der Nutzer was eingeben kann und nicht eine endlos lange Liste durchscrollen muss.

Ich will jetzt nicht sagen, dass <input type="number" min="-12" max="13" step="1"/> für die Zeitzone besser wäre; aber vielleicht ein Schieberegler <input type="range"/>?

Übrigens gibt es etliche Zonenzeiten, die nicht um ganze Stunden von UTC abweichen, sondern um halbe oder gar Viertelstunden. Wie kann man diese wählen?

Was soll das eigentlich? Ist es sinnvoll, sich Sonnenauf- und -untergang für einen gewählten Ort in einer anderen Zonenzeit als derjenigen für ebendiesen Ort anzeigen zu lassen?

Deine Berechnung ist übrigens fehlerhaft. Nowosibirsk, +01:

Was ist das für ein Sprung? Die Natur hat keinen solchen in der Schüssel.

LLAP 🖖

[pl]

Hi Gunnar,

der Rechenfehler liegt im CPAN Modul. Die kochen da auch nur mit Wasser. Ansonsten danke für Deine Hinweise.

MfG

[pl]

Übrigens gibt es etliche Zonenzeiten, die nicht um ganze Stunden von UTC abweichen, sondern um halbe oder gar Viertelstunden. Wie kann man diese wählen?

Dafür kannst Du übrigens vorteilhaft meinen Webservice nutzen.

Was soll das eigentlich? Ist es sinnvoll, sich Sonnenauf- und -untergang für einen gewählten Ort in einer anderen Zonenzeit als derjenigen für ebendiesen Ort anzeigen zu lassen?

s,o. Mfg, schönes Wochenende.

[markk]

Moin,

Spieglein Spieglein an der Wand..

"Aber Dein Beitrag war fachlich dermaßen daneben, deswegen musste ich das tun. Du hast überhaupt keine Ahnung von Laufzeitoptimierung und der Begriff der Factory ist Dir ebenfalls unbekannt."

https://forum.selfhtml.org/self/2017/aug/20/klassen-konstanten-zu-laufzeit-definieren/1702110#m1702110

"Du hast weder das Beispiel angeschaut noch die Antwort verstanden, also nochmal:"

https://forum.selfhtml.org/self/2016/dec/18/zeilenweises-lesen-einer-text-datei-in-html/1682772#m1682772

"Du hast den Sinn eines Frameworks mal wieder nicht verstanden,"

https://forum.selfhtml.org/self/2017/feb/3/crawlt-google-alte-seiten-fuer-immer/1686519#m1686519

"Du hast den Sinn des link/canonical nicht verstanden."

https://forum.selfhtml.org/self/2017/mar/2/css-shapes/1688773#m1688773

"Also mal ehrlich, wer für diesen Supertipp Minus gibt, hat überhaupt keine Ahnung von praktischer Programmierung."

https://forum.selfhtml.org/self/2017/jan/24/weitere-felder-einblenden/1685230#m1685230

"Du hast meinen Artikel postmax nicht gelesen, nicht verstanden oder ignoriert." "Wenn hier jemand was nicht versteht bist du es Meister dedlfix."

https://forum.selfhtml.org/self/2016/mar/23/dateiupload-und-sicherheit-strich-lesbarer/1663901#m1663901

"Dann hast Du wohl den Sinn eines Templatesystems nicht richtig verstanden"

https://forum.selfhtml.org/self/2016/mar/28/daseinsberechtigung-von-server-sides-include/1664254#m1664254

Cheers, markk

[pl]

Spieglein Spieglein an der Wand..

Von wegen!

Schön Daß Du Dir die Arbeit gemacht hast, Threads rauszusuchen in denen es im die Energie des Verstehens geht. Ich gab mir da jedenfalls die Mühe zu erklären warum ich zu bestimmten Feststellungen gekommen bin.

Ich bin nicht sicher, ob Du den Sinn aller dieser Elemente auch wirklich verstanden hast…

Ohne weiteren Kommentar, das ist einfach nur arrogant!

"Du hast weder das Beispiel angeschaut noch die Antwort verstanden, also nochmal:"

Eben: nochmal. Und genau da ist der Unterschied! MfG

[Gunnar Bittersmann]

@@Bernd

Hier möchte ich gerne Name und Mail Adresse nebeneinander anordnen. Die restlichen Felder untereinander. Geht das ohne zusätzlichem HTML?

Das ginge. Es ist aber nicht sinnvoll. Nutzer lesen Formulare von oben nach unten, nicht im Zickzack. Es ist sinnvoll, Eingabefelder grundsätzlich untereinander anzuordnen, nicht nebeneinander.

Ausnahmen können Eingabefelder sein, die zusammengehören, wie Vorname / Familienname und PLZ / Ort. Solch ein Ausnahmefall ist bei dir nicht gegeben.

Zweitens sehe ich immer mal wieder wenn ich in ein Feld rein klicke, dass dann die Bezeichnungen nach oben rutschen, ich weiß nicht wie das heißt und wie ich dieses einbauen könnte. Benötige ich dann zusätzlich Labels?

Labels benötigst du sowieso, damit das Formular bedienbar ist. Placeholder sind kein Ersatz für Labels! – Wirklich nicht! Sämtliche Eingabefelder benötigen eine Beschriftung.

Labels kann man auch so stylen. Was nicht heißen soll, dass man das tun sollte. Nein, sollte man nicht. Beschriftungen sollen nicht wie Eingaben aussehen, sondern das sollte für den Nutzer deutlich unterscheidbar sein, damit man sieht, was man schon eingegeben hat.

LLAP 🖖

[pl]

Hi,

Hier möchte ich gerne Name und Mail Adresse nebeneinander anordnen. Die restlichen Felder untereinander. Geht das ohne zusätzlichem HTML?

Das ginge. Es ist aber nicht sinnvoll. Nutzer lesen Formulare von oben nach unten, nicht im Zickzack. Es ist sinnvoll, Eingabefelder grundsätzlich untereinander anzuordnen, nicht nebeneinander.

Sehr gut, ausgezeichnet!

Ausnahmen können Eingabefelder sein, die zusammengehören, wie Vorname / Familienname und PLZ / Ort.

Oh, da haben wir doch genau da den Begriff der Gruppierung -- was man mit dem dafür passenden Element selbstverständlich auch semantisch auszeichnen könnte 😉

MfG

[Felix Riesterer]

Lieber Bernd,

Hier ein kleines Online-Beispiel:
https://jsfiddle.net/wjz5rzrw/

ich habe es einmal nach meinen Vorstellungen aktualisiert.

Liebe Grüße,

Felix Riesterer.