CSS-Layout for Formulare (responsive)

[Yves]

Ich möchte ein CSS-Layout entwickeln, um Formulare anzuzeigen. Also Gruppen von Feldern mit jeweils einem Titel, dem Eingabefeld und einer Fehlermeldung. Diese Felder sollen grundsätzlich in Zeilen angeordnet sein, also untereinander. Aber schmale Felder sollen bei ausreichend Bildschirmbreite nebeneinander erscheinen. Diese drei Bestandteile müssen aber immer direkt untereinander sein. Außerdem sollen die Eingabefelder in derselben Zeile auf einer Höhe ausgerichtet sein. Also nicht eins mal weiter unten als das andere, nur weil der Titel darüber umbricht.

Ich habe das mal in einer Skizze dargestellt: (schwarz: Titel, blau: Eingabefelder, orange: Fehlermeldungen)

Nun wie kann ich das machen? Welche Techniken brauche ich dafür? Kann CSS sowas überhaupt mit vernünftigem Aufwand darstellen?

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

<form>
  <div class="field">
    <label>A full-width field</label>
    <input type="text">
  </div>

  <div class="field-group require-desktop">
    <!-- field-group fasst Felder in einer Zeile zusammen -->
    <!-- require-desktop: Alles untereinander falls kleiner als Desktopbreite -->
    <div class="field grow-2">
      <label>Short text</label>
      <input type="text">
    </div>
    <div class="field grow-2">
      <label>Longer text that spans two lines</label>
      <input type="text">
      <div class="validation">Error message</div>
    </div>
    <div class="field autosize">
      <label><input type="checkbox"> Checkbox</label>
    </div>
    <div class="field grow-3">
      <label>Text</label>
      <input type="text">
      <div class="validation">Error message<br>More errors in second line</div>
    </div>
  </div>
</form>

Damit kann ich folgende Eigenschaften festlegen:

• Ein Feld mit jeweils Titel, Eingabefeld und Fehlermeldung
• Breite eines Felds in der Zeile, Angabe als Gewicht, alternativ kein Ausfüllen (Anpassung an Inhalt)
• Angabe pro Zeile, ab welcher Breite alles untereinander umbrechen soll

Ich habe derzeit einen Entwurf mit Flexbox, aber der berücksichtigt die Fehlermeldungen noch nicht. Dabei habe ich eine Zeile für Titel und Eingabefeld, vertikal unten ausgerichtet. Die Fehlermeldungen landen in einer separaten Flex-Zeile. Im schmalen Layout passt das natürlich nicht mehr zusammen: Zuerst kommen alle Felder, dann alle Fehlermeldungen der Zeile. Eine Zuordnung ist nicht mehr möglich.

Die Fehlermeldung auch noch mit in die Flex-Zelle aufzunehmen erlaubt keine vertikale Ausrichtung des Eingabeelements mehr. Wenn ich ein Feld oben ausrichte, bestimmt die Höhe des Titels die Platzierung des Eingabefelds. Wenn ich sie unten ausrichte (wie jetzt), schiebt eine Fehlermeldung alles nach oben.

CSS Grid scheint hier besser geeignet. Da könnte ich drei Zeilen dafür verwenden. Allerdings muss man allen Elementen fix im CSS eine Zeilen- und Spaltennummer zuordnen. Eine automatische Verteilung geht wohl nicht. Und ein Umbruch mit Media Queries gleich gar nicht. Und die Spaltenbreiten müssen auch einmal zentral für alle Spalten festgelegt werden, weshalb ich sie nicht mehr im HTML mit Klassen pro Spalte angeben kann.

Vielleicht sollte ich die gute alte HTML-table nehmen? Und per Media Queries im CSS umgestalten?

Gibt's noch andere Möglichkeiten? Möglichst mit IE11-Unterstützung, so lange den noch jemand nutzt. Wenn CSS das nicht hergibt, müsste ich vielleicht was mit JavaScript basteln, wobei sich auch hier die Frage stellt, was das JavaScript bauen soll, das der Browser dann rendert und bei Größenänderung anpasst.

[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 🖖

[Yves]

Es geht eben um solche Felder, die zusammengehören. Vorname/Nachname. Name/E-Mail/Telefon. Option1/Option2/Option3. Das sieht einfach nix aus, wenn alles plump untereinander steht. Jedes Papierformular nutzt beide Achsen, um Felder anzuordnen. Letztlich gilt auch auf dem Bildschirm, dass der Platz genutzt werden will. Wenn ich ständig hoch und runter blättern muss, um alles zu sehen, was auch auf einen Bildschirm gepasst hätte, dann ist das nervig.

Fehlermeldungen stellen ja die Ausnahme dar. Für sie permanent einen signifikanten Platz freizuhalten finde ich nicht angemessen. Dann könnte ich auch die Labels links daneben platzieren, wie früher. Allerdings stellt sich mit jeder inhaltsabhängigen Spalte die Frage nach der Breite. Ist sie variabel, unterscheidet sie sich in jedem Abschnitt. Eine Zwischenüberschrift und die Spalten drüber und drunter sind unterschiedlich breit. Ist sie fix, passt sie nicht. Dazu kommen noch Übersetzungen, die Textlängen stark beeinflussen.

Die Label-Zuordnung hatte ich bewusst weggelassen. Momentan habe ich eine etwas andere Struktur:

<label class="field">
  Titel
  <input type="text">
</label>

Im CSS wird '.field input' (vereinfacht) als block dargestellt und wandert damit in seine eigene Zeile. Da sich input innerhalb von label befindet, ist eine ID zur Zuordnung unnötig. Allerdings nervt es schon sehr, dass auf Mobilgeräten ständig die Tastatur aufgeht und den halben Bildschirm belegt, wenn ich irgendwo zwischen die Textfelder "tippe". Und da der einzige funktionale Nutzen der Zuordnung wohl noch die Hotkeys sind, die sowieso niemand nutzt, kann man es auch bleiben lassen. Semantik hin oder her, wenn die Funktion gestört ist.

Einzig für Radio-/Checkboxen fasse ich label und input zusammen, damit man auch den Text anklicken kann und nicht nur die kleine Box treffen muss. Da geht aber auch keine Tastatur auf.

Die Fehlermeldung dann auch noch ins Label aufzunehmen, verbessert sie Sache meines Erachtens nicht. Im Fall von Checkboxen wird hier sogar eine unerwartete Aktion ausgelöst.

Gibt es irgendwo Informationen über den Zustand und die Unterstützung von subgrid? MDN und caniuse helfen mir grade nicht weiter.

Im Grunde ist mir das Aussehen im IE relativ egal. Wer den noch nutzt ist entweder blöd oder ne arme Sau. 2020 wird er gemeinsam mit Windows 7 verschwinden. Aber bedienbar muss das Formular auf jeden Fall bleiben. IE10 ist mir bereits egal, den unterstützt niemand mehr, auch nicht Microsoft, und es gibt wirklich keinen Grund mehr, den zu verwenden. Wenn es im IE11 sogar ordentlich oder annähernd ähnlich aussieht, wäre das aber schön.