molily: Label-Element / input umschließen? display:block?

Beitrag lesen

Nun ist es doch so, dass das Label-Element ein Inline-Element ist für das margin-top und margin-bottom keine Gültigkeit haben.
Was ist denn da der gescheiteste Weg, um einen Abstand zum vorherigen Feld zu bekommen?

Den Blockelementen darüber den Abstand geben. Üblicherweise ein p oder ein li.

Soll ich einfach das Label zu einem Block-Element machen?

Kannst du auch, aber zur allgemeinen Formularstrukturierung eignen sich entsprechende HTML-Elemente, denen man üblicherweise Margins zuweist (p, ul, ol, dl, table, ferner fieldset/legend, section, div).

Eine Abweichung von dieser Regel in Formularen halte ich allgemein nicht für sinnvoll. Was nicht ausschließt, dass man Labels layoutet.

Welches der folgenden Möglichkeiten ist besser bzw. korrekter?

Sie sind beide gleich korrekt und haben natürlich in gewissen Fällen Vor- und Nachteile, je nachdem, wie das Formular aufgebaut ist und welche Styles man anwenden will.

Ich verwende gerne häufig verschachtelte Inputs mit display: block, weil dann gleich ein großer Bereich klickbar ist und das Feld fokussiert bzw. aktiviert sowie keine for-/id-Verbindung nötig ist. Das Generieren von IDs in großen Formularen ist nämlich äußerst lästig.

Mathias