CSS-Layout for Formulare (responsive)

[Gunnar Bittersmann]

@@Yves

Diese Felder sollen grundsätzlich in Zeilen angeordnet sein, also untereinander. Aber schmale Felder sollen bei ausreichend Bildschirmbreite nebeneinander erscheinen.

Ob nebeneinander oder untereinander würde ich nicht an der Breite der Felder festmachen, sondern ob diese inhaltlich eng(!) zusammengehören. 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.

Wie wär’s damit: Label und Eingabefelder untereinander, Fehlermeldungen (auf breiten Viewports) rechts davon? Dann fallen sie auch mehr auf.

Diese drei Bestandteile müssen aber immer direkt untereinander sein. Außerdem sollen die Eingabefelder in derselben Zeile auf einer Höhe ausgerichtet sein.

Ich denke, für dieses Vorhaben brauchst du Subgrid; musst also noch ein paar Wochen auf Browserunterstützung warten …

Ich habe mir etwa folgende Markup-Struktur vorgestellt, um so ein Formular zu definieren:

for-Attribute der Labels und ids der Eingabefelder hast du hier nur der Einfachheit halber weggelassen?

Ich denke auch, dass die Fehlermeldung ins label gehört:

<label>
	<span>Name: </span>
	<input name="name"/>
	<span class="error-message" hidden="">Wollen Sie uns nicht Ihren Namen verraten?</span>
</label>

Möglichst mit IE11-Unterstützung

Natürlich wird IE11 unterstützt, wie auch IE 10, 9, 8, … Das Formular soll bedienbar sein. Was nicht heißt, dass es genauso aussehen muss wie in modernen Browsern.

LLAP 🖖