suit: Formular mit Divs statt Tabellen

Beitrag lesen

Mein Code funktionierte nun fuer einspaltige Formulare recht gut.
Wenn ich jedoch zwei Spalten haben moechte, oder unterschiedlich
breite Formularelemente, dann klappt das nicht mehr - soll heissen,
die Elemente werden nicht mehr gleichmaessig ausgerichtet. (*)

was verstehst du unter mehrspalting?
label input label input zb?

unterschiedlich breite formulare
fieldset (100%)
  label (30%) input (70%)

ich verstehe das problem nicht - mit relativen angaben hatte ich bis dahin nie probleme

Dann gibt es da ja auch noch den Moloch von selfhtml:
Ich meine, hunderte Zeilen an CSS nur fuer ein Formular. Das kann es
doch echt nicht sein.

mit einem ordentlichen konzept dahinter, wenn man weiss, was man will, gehts mit weit weniger

Resuemiere ich nun mal, dann komme ich leider zu dem Entschluss, dass
Formulare ohne Tabellen der reinste Horror sind - zumindest mehrspaltige
Formulare ;-(

nein, wenn du darüber nachdenkst, wie man es ordentlich macht, hast du keine probleme ;)

angenommen du hast vier felder, mit diesem codeschnipsel als ausgangsbasis

<from>
  <fieldset class="odd">
    <p class="odd">
      <label>Feld1</label>
      <input />
    </p>
    <p class="even">
      <label>Feld2</label>
      <input />
    </p>
  </fieldset>
  <fieldset class="even">
    <p class="odd">
      <label>Feld3</label>
      <input />
    </p>
    <p class="even">
      <label>Feld4</label>
      <input />
    </p>
  </fieldset>

damit kannst du ohne probleme in folgenden reihenfolgen ausrichten ohne das html zu ändern

form ist immer 100% breit, in allen beispielen

1
2
3
4
fieldset und p sind jeweils 100% breit

1 2
3 4
fieldset ist 100% breit, p jeweils 50%

1 3
2 4

fieldset ist 50% breit, p jeweils 100%

1 2 3 4

fieldset ist 50% breit, p jeweils 50%

1
2
3 4

fieldset ist 100% breit, alle p auch 100% - alle p in fieldset.even sind 50% breit

1 2
3
4

fieldset ist 100% breit, alle p auch 100% - alle p in fieldset.odd sind 50% breit

usw.

du musst dir nur überlegen, welche stile es gibt - nicht einfach freiform-papiervorlagen umbauen, das kann im web keiner mehr ausfüllen

zb so

  1. es kann maximal 2 spalten geben (even/odd) - ansonsten kannst du auch row1, row2 und row3 vergeben wenn du mehrere zustände hast usw

es gibt inputs in den längen small, medium und large die sich nur in deren width unterscheiden

labels von radiobuttons (in einem p mit der klasse .radio) haben keine fixe breite, radiobuttons können nebeneinander und untereinander sein

usw

du schreibst dir "regel" für bausteine auf, aus denen dein formular bestehen können soll, aus dem baust du das dann zusammen

somit sogst du einerseits für ein einheitliches bild, andererseits kannst musst du dann nicht verzweifeln ;)

wenn du von vorne herrein dein formular mit einer tabelle layoutest, ist es für immer so gegossen und du musst ein kompliziertes tabellenlayout anpassen

in einer css-block-bauweise sparst du auf langesicht beim umbauen vor allem komplexer formulare viel zeit zudem kannst du durch das umdefinieren deiner regeln schnell alles ändern oder wenn du immer den selben code verwendest mehrere css vorlagen erstellen und so alle formulare auf einer website binnen minuten durch ersetzen eines einzigen css files umgestalten

alle kurzen input-felder in graden zeilen (postleitzahl, hausnummer usw) sollen statt 25% jetzt 30% lang sein? kein problem, nur p.even input.small abändern und die sache hat sich

alle radiobutton-labels sollen einen absatz erzeugen und das label soll rot sein?
p.radio label auf rot und block umstellen, fertig