[Formular] Semantisch richtige Elemente verwenden
 

Hallo Leute,

ich möchte ein Eingabeformular gestalten, bei dem auf der linken Seite die Beschreibung der Input Felder vorhanden ist und auf der rechten Seite die Input Felder selbst.

Hier ein kleines Beispiel:
http://zeussi.bplaced.net/formular-xhtml.png


Nun, für Formulare gehören eigentlich folgende Elemente:
Schön, damit sind aber die Elemente untereinander, also funktioniert das schon mal nicht. Auch ist es nicht möglich, diese Elemente so zu floaten, dass sie nebeneinander sind (block / inline Elemente).

Gut, welche Möglichkeiten gibt es noch?

1. das Ganze mittels divs jeweils trennen, also label und input Felder und floaten

2. in Listen aufteilen (label / input) und floaten

Problem: die Höhe der Input Felder ist nicht genau so hoch wie deren Beschreibung - somit verschieben sich die zwei Blöcke in der Höhe

Was bleibt? Mir fallen nur die guten alten Tabellen ein... dabei hat jede Spalte eine bestimmte Höhe und es passt. - Doch was sagt da mein gutes Gewissen - ist das korrekt?

Somit meine Frage an euch, was empfiehlt sich für dieses Problem als Lösung?


Schon mal vielen Dank im Voraus,
Zeussi

Warum ist es nicht möglich zu floaten?

floate input und label jeweils left und gib beiden eine Breite. Haut vollkommen und problemlos hin.

Ups, Thielo Du hast (teilweise) Recht :)

Hatte es vorhin gerade probiert - da hats nicht geklappt, auch nicht mit display: block; - da war wohl irgendwo der Wurm drin!

Und nach jeder Zeie dann ein:
?


Trotzdem bleibt so folgendes Problem:
- Die Hintergrundfarbe soll wie in obrigem Beispielbild abwechselnd unterschiedlich sein - mit dieser Methode kann ich dies nicht bestimmen

Mir fällt dazu ein, dass ich jede Zeile in eine Liste packe - dann spare ich mir die <br /> und kann die Hintergrundfarbe bestimmen - ist das semantisch korrekt?

LG,
Zeussi

wenn du in eine Liste das Formular reinsetzt musst du doch trotzdem noch die einzelnen Elemente floaten. Generell gilt: input und label sind von natur aus block Elemente.

Semantisch korrekt darüber kann man streiten (meine Meinung :D) aber ich würde sagen das es ok wäre es in eine Liste zu setzen.

Aber um mal den Punkt der Hintergrundfarbe zu verwenden:

Du könntest doch einfach um jede Zeile ein div mit einer Klasse (der jeweiligen Farbe entsprechend) herum setzen. Und es müsste egentlich genügen wenn du dann jedem div ein clear: left; gibst. (eigentlich, ist ja schon spät ;) )

Ja, richtig, es war nur eine Ergänzung meinerseits, die gefehlt hat :)
Jip, beide Elemente - label und input sollen in ein li-Element

Das ist jetzt der Punkt:
- kann aus irgend einem Grund der Browser nicht auf die CSS Datei zugreifen, dann erhalte ich ganz viele Div-Blöcke nebeneinander wenn ich in jeder Zeile ein Div setze
- setze ich eine Liste, so werden Elemente trotzdem untereinander angezeigt und sind richtig strukturiert

//edit: zur div Variante hab ich vergessen dass ja ein break gesetzt wird... dann ist es wieder egal... hm, also geht beides, nur was ist "richtiger" und schöner? Geschmacksache? ;)

Also von dem Standpunkt aus gesehen, würde ich persönlich eher auf die Liste zugreifen?

Richtig... zu solch einer Zeit sollte man sich eigentlich über so etwas keine Gedanken machen 8)

Nein ;)

Ich persönlich zeichne Formulare mit p aus, d.h. label und das dazugehörige Eingabe-Element stehen immer zusammen in einem p (aber div oder li sind ebenfalls denkbar).

Den konkreten Fall würde ich umsetzen, indem label und input jeweils mit width links floaten, und p die Floats einschließt, indem es ebenfalls links floatet (mit width: 100%). Der Submit-Button kann dann clearen (und bekommt dafür display: block).

Danke heiko für Deinen Lösungsvorschlag - klingt auch gut :)

Dann kann ich ja ohne Bedenken eine dieser Methoden verwenden! Danke nochmal!

Bei mir stehen die einzelnen Eingabefelder meistens in einer Definitionsliste. <label> steht dann in <dt> und das Feld selber in <dd>. Der Submit-Button steht dann jeweils nach dieser Liste in einem eigenen Absatz. Das sieht schlussendlich also etwa folgendermassen aus:

Diese Konstruktion lässt sich auch hervorragend mittels CSS formatieren. Deine Vorgabe sollte damit problemlos realisierbar sein.

Allerdings ist die Zuordnung von label & input per for/ID und dt/dd imho eine überflüssige Dopplung bzw. Redundanz.

Abgesehen davon, dass die Vorgabe damit wesentlich mühsamer umsetzbar ist, als bei einem Element, dass label & input paarweise umgibt.

Das stimmt, muss ich ehrlich zugeben. Diese doppelte Zugehörigkeit, oder wie man es auch immer nennen will, ist natürlich gegeben. Meine Variante finde ich aber etwas flexibler. Die Formatierung wird dadurch zwar etwas komplizierter, dafür konnte ich diesen Code aber auch immer wieder verwenden und zwar egal, wie ich nun das Formular jeweils gestaltet habe.

Deine Variante mit dem Absatz ist in diesem konkreten Fall wohl etwas besser. :D