Formulare und Sektionen allgemein

[jobo]

Hallo Felix,

Vinzenz hat Recht, wenn er meinen Lösungsansatz als akademische CSS-Übung (meine Worte) sieht. Ich werde wohl das Markup in eine Liste packen. Dann ist das Problem strukturell gelöst. Aber warum konnte ich es nicht mit reinen CSS-Mitteln lösen (akademische Frage)?

Weil wie Gunnar richtig bemerkt, im HTML ein "Fehler" ist. Der Bezug zwischen Label und Input wird über das Attribut "for" hergestellt. XHTML_2 macht es mMn. "richtig". Label und Input müssen in ein umspannendes Element. Eigentlich in ein <div>, denn sie bilden eine "Division", eine Einheit. In HTML5 gibt es ja wohl ein Section-Element, was Überschriften und deren Absätze umschließen soll. Das ist mMn. "semantisch" das selbe, "akademische" Problem.

Als ich mich mit akademischem Interesse mal mit einem Formulargenerator beschäftigt hatte, bin ich natürlich auch darauf gestoßen, dass man die "Labels" natürlich gerne alle in einer Breite hätte (wenn man nicht nur eine Zeile anzeigen möchte). Dann aber landest Du wieder bei einer Tabelle, denn du möchtest nur die Elemente in einer gleichen Breite zeigen, die einen Tabellarischen Überblick gewähren über Datensätze, die sich zB. sinnvoll durch ihre Bestelleingangsnummer sortieren lassen.

Eigentlich ist schon der Unterschied der Formularelemente murx würde ich meinen. Denn hier bestimmt HTML die Darstellung, nämlich "select-Box" oder "Liste von Checkboxen/Radioboxen". <input type="select"><option>...</option></input> wäre eigentlich logischer.

Das Zend-Framework nutzt definition-list für seine Formular-Klasse. Und deren Formular-Validator klebt an der Formular-Klasse, und damit mischt sich hier Validierung mit Darstellung. Das hat mich stutzig gemacht, warum gerade Formulare, also eigentlich _die_ Schnittstelle zwischen User und Server, so "problematisch" sind.

Ich hatte damals u.a. sowas in meinem CSS:

div > label {display:block;float:left;width:10em;}

Später aber auch:

a) <div class="label_control_pair"><label>... <input ....
für sowas wie <label>... <select> (also Paarung Inline- und Bockelement)

und
b) <span class="label_control_pair"><label> ... <input> ...

um multiple Auswahllisten mit Checkboxen möglich zu machen, (Inline-Label und Inline-Input).

Gruß

jobo