CSS-Layout for Formulare (responsive)

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