Die semantische Bedeutung des Form-Tags
Nach der Logik von semantischem HTML und dem darauf aufsetzendem CSS zur Präsentation der HTML-Struktur können sich formularbezogene Stilelemente einfach auf das FORM-Tag beziehen. Soweit so gut und richtig. Es existiert jedoch speziell bei komplexeren Formularen ein Präsentationslogikproblem. Dies will ich im Folgenden an einem theoretischen Beispiel verdeutlichen.
Wir wollen dem Benutzer ein Formular (s.u. grüner Rahmen) anbieten, welches umrahmt ist. Es handelt sich um ein recht komplexes Formular, welches aus technischen Gründen aus mehreren HTML-Formularen mit entsprechenden Submits besteht. Aus logischen und technischen Gründen können und dürfen HTML-Formulare nicht verschachtelt werden. Dem Benutzer soll das Formular als ein Formular (grün) präsentiert werden. Dies kann aus Usability-Gründen sinnvoll sein. Letztlich ist es für den Benutzer egal, ob er nun technisch-gesehen mehrere Formulare vor sich hat oder ein einziges Formular – ihn interessiert nur das komfortable und strukturierte Ausfüllen des Formulars (grün).
Hier zeigt sich nun, dass das FORM-Tag (s.o. rote Rahmen) eine rein technische Funktion hat und eigentlich keine Bedeutung für die Präsentation. Zwar handelt es sich beim FORM-Tag um ein Blockelement und in einigen (älteren) Browsern hat es sogar in der Standardansicht einen Margin, jedoch war das FORM-Tag immer ein funktionales Tag und kein Präsentations-Tag.
Bei einem solchen Formular (grün) ist auch einleuchtend, warum es auch Elemente ausserhalb des Form-Tags gibt, die aber inhaltlich und optisch zum Formular gehören. Beispielsweise könnte im obigen Schema über den HTML-Formularen eine Fehlermeldung erscheinen, falls der Benutzer eine fehlerhafte Angabe gemacht haben sollte. Diese Fehlermeldung wäre dann nicht innerhalb des FORM-Tag-Bereichs, nähme aber eindeutig Bezug auf das Formular und gehöre inhaltlich zu ihm.
Bei der Konzeption der HTML-Struktur sollte dieser Aspekt berücksichtigt werden. Ich empfehle daher das FORM-Tag im CSS zu „Nullen“ (margin:0;padding:0;) und prinzipiell eine Klasse (z.B. .form) zu definieren auf die das CSS anstelle von form Bezug nimmt. Somit kommt im CSS bis auf das Nullen kein Bezug auf form vor.
Dies entspricht streng genommen nicht den Regeln von semantischem HTML, jedoch stelle ich die semantische Bedeutung des FORM-Tags in Frage, da es meiner Meinung nach ein rein technisch begründetes Tag ist. Zudem ist es ohnehin notwendig Formularelemente im Fieldset-Bereich einzubetten. Insofern übernimmt das Fieldset-Tag die semantische Bedeutung für Bereiche innerhalb des Formulars. Sollten also im dargestellten Schema die roten Rahmen erscheinen, so könnten sie durch das Fieldset statt des Form-Tags definiert sein.
Daraus folgt dieses CSS-Gerüst:
form {margin:0;padding:0}
.form {
/*Irgendwas*/
}
fieldset {
/*Irgendwas*/
}