HTML/CSS: Formulargestaltung

[Matthias Apsel]

Om nah hoo pez nyeetz, alle!

Wie gestaltet man am besten ein Formular, gemeint sind hauptsächlich label-input-Paare, das sich möglichst flexibel verhalten soll? Dabei soll „Beschriftung: __________“ immer schön am Doppelpunkt ausgerichtet untereinander stehen. Wie eben in diesem Antwortformular.

#1# eine Tabelle verwenden? Ist zumindest semantisch nicht verkehrt und liefert ohne viel CSS ansprechende Ergebnisse.

#2# display: table-*? Dann kann ich auch gleich eine Tabelle nehmen. Das ist ehrlicher.

#3# <label>… <input></label> mit display: block fürs input? Da müssen die Doppelpunkte in das Markup oder aufwändig positioniert werden

#4# <label>…</label><input><br>? Hier muss ich feste (Mindest-)Breiten für das label vorgeben.

#5# <dt><label>…</label></dt><dd><input></dd>? Nicht wirklich, oder?

#6# flexbox?

#7# ganz anders?

Wie sind eure Erfahrungen? Was ist best practise draußen im harten Leben des Webentwicklers?

Matthias