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.