Sympatisant: Formular mit Divs statt Tabellen

Hallo,

ich moechte gerne ein Formular mittels CSS und DIVs realisieren(*).
Alle Beispiele, die ich hier und im Web gefunden habe, nutzen
in etwa den gleichen Code.
Doch stoesst man dabei auf Probleme, sollte eine Feldbeschreibung

  • also die linke "Spalte" - mal etwas laenger ausfallen.

Gibt es da eine Moeglichkeit, dass sich alle anderen Container
(linke Spalte) der Groesse anpassen - also sich an der Laenge des
groessten Containers orientieren?

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
 <title>Test</title>  
<style type="text/css">  
.div_table_row label {  
 float:left;  
 height:15px;  
 margin:0pt 10px 0pt 0pt;  
 padding:0pt;  
 text-align:left;  
 width:150px;  
 white-space:nowrap;  
}  
</style>  
</head>  
<body>  
<div class="div_table_row">  
 <label>Erster Eintrag</label>  
 <input type="name" size="20">  
</div>  
<div class="div_table_row">  
 <label>Zweiter</label>  
 <input type="name" size="20">  
</div>  
<div class="div_table_row">  
 <label>Lorem Ipsum DoremDorem Lareo</label>  
 <input type="name" size="20">  
</div>  
</body>  
</html>  

(*) Ich bin mir dessen bewusst, dass man fuer Formulare durchaus
Tabellen nutzen kann.
Doch in meinem Falle ist es erforderlich mit DIVs zu arbeiten.

Besten Dank!

MfG,
Sympatisant

--
"Non dura iubeantur, non prohibeantur inpura."
  1. Gibt es da eine Moeglichkeit, dass sich alle anderen Container
    (linke Spalte) der Groesse anpassen - also sich an der Laenge des
    groessten Containers orientieren?

    nein, das ist ein feature von tabellen - javascript könnte helfen

    <div class="div_table_row">
    <label>Lorem Ipsum DoremDorem Lareo</label>
    <input type="name" size="20">
    </div>

    
    >   
    >   
    > (\*) Ich bin mir dessen bewusst, dass man fuer Formulare durchaus  
    > Tabellen [nutzen kann](http://forum.de.selfhtml.org/archiv/2005/8/t112555/).  
    
    tabellen sind in formularen genauso falsch wie zum layouten von inhalten, formulare sind formulare und keine tabellarischen daten  
      
    
    > Doch in meinem Falle ist es erforderlich mit DIVs zu arbeiten.  
      
    was hälst du von <fieldset />- oder <p />-elementen? es ist meistens nicht erforderlich mit <div />-elementen zu arbeiten  
      
    zudem, wieso hat ein div die klasse "div\_table\_row" - ist das nicht etwas unglücklich gewählt? wie wärs mit "formularzeile"?
    
    1. Hallo,

      tabellen sind in formularen genauso falsch wie zum layouten von inhalten,
      formulare sind formulare und keine tabellarischen daten

      Das ist sicherlich eine Grundsatzfrage - aber ich schliesse mich deiner
      Meinung an, da es fuer mich logisch klingt.

      was hälst du von <fieldset />- oder <p />-elementen? es ist meistens nicht
      erforderlich mit <div />-elementen zu arbeiten

      Da halte ich viel von ;)

      zudem, wieso hat ein div die klasse "div_table_row" - ist das nicht etwas
      unglücklich gewählt? wie wärs mit "formularzeile"?

      ..war ja nur zum Testen.

      Das heisst nun, dass es _nicht_ moeglich ist(*), die Labels auf eine
      gemeinsame Laenge zu bekommen?
      Dann muss ich an dieser Stelle aber mal in den Raum werfen, dass Tabellen
      dann doch durchaus Sinn machen oder nicht?

      (*) ohne Javascript

      MfG,
      Sympatisant

      --
      "Non dura iubeantur, non prohibeantur inpura."
      1. Da halte ich viel von ;)

        wunderbar

        unglücklich gewählt? wie wärs mit "formularzeile"?
        ..war ja nur zum Testen.

        ich hab schon live projekte gesehen wo ein produktivscript zum rendern der überschriften "test.php" benannt war - war ursprünglich auch nur zum testen ;)

        auch wenns nur zum testen ist, benenn es gleich richtig, da sparst du dir nachher viel arbeit beim umbennen und kommst nicht in verlegenheit, ungünstige namen zu wählen

        Das heisst nun, dass es _nicht_ moeglich ist(*), die Labels auf eine
        gemeinsame Laenge zu bekommen?

        das habe ich nicht gesagt - aber labels haben keinen bezug zueinander (sollen sie auch nicht) - du kannst aber ohne probleme jedem label eine fixe breite zuweisen die allen gerecht wird - nur dynamisch am längsten eintrag orientieren geht halt nicht, aber das muss es ja nicht?

        Dann muss ich an dieser Stelle aber mal in den Raum werfen, dass Tabellen
        dann doch durchaus Sinn machen oder nicht?

        wenn die daten einen bezug zueinander haben - bei tabellen ist es erforderlich, dass die spalten in jeder zeile gleich breit sind, sonst siehts blöd aus, weil die daten ja beziehungen haben - in diesem fall ist es aber keine tabelle ;)

          
        <fieldset>  
          <legend>Ihre Daten</legend>  
          <p class="odd"><label>Vorname</label> <input /></p>  
          <p class="even"><label>Nachname</label> <input /></p>  
          <p class="odd"><label>Straße</label> <input /></p>  
          <p class="even"><label>PLZ</label> <input /> <strong class="error">Dieses Feld darf nur Ziffern beinhalten</strong></p>  
        </fieldset>  
        
        

        es spricht nichts dagegen, dann allen <label />-elemente eine fixe breite zu geben, damits gut aussieht

        das <strong />-element wird natürlich nur erzeugt/eingeblendet, wenn tatsächlich ein fehler auftritt

        1. Hallo,

          danke fuer dein ausfuehrliches Beispiel.

          [..] nur dynamisch am längsten eintrag orientieren geht halt nicht,
          aber das muss es ja nicht?

          Das ist der einzige Punkt, der mich allerdings noch stoert.
          Denn im Falle von dynamisch erzeugten Formularen kann man ja einfach
          nicht wissen wie lang die maximale Laenge sein wird.

          MfG,
          Sympatisant

          --
          "Non dura iubeantur, non prohibeantur inpura."
          1. Hallo,

            wenn das Formular mit einer serverseitigen Skriptsprache erzeugt wird, könntest Du z.B. die längste Labelbeschriftung (z.B. php strlen(string)) auslesen und diese dann multipliziert mit einem fixen Wert, der ungefähr der Breite eines Zeichens enspricht als inline-Style jedem label-Element zuweisen.

            Grüße Basti

            1. Hallo Basti,

              ich habe mich jetzt an den Ergebnissen unserer Postings orientiert
              und folgendes umgesetzt:

                
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
              <html>  
              <head>  
               <title>Test</title>  
                
              <style type="text/css">  
              
              
                
              .form_container input { width:160px; }  
              .form_container select { width:164px; }  
              .form_container textarea { width:300px; height:150px; }  
              .form_container .form_checkbox  { height:16px; width:22px; margin-left:-4px; }  
              .form_container p { padding:0px; margin:2px 0px 2px 0px; }  
              .form_container strong { color:red; }  
              .form_container em { font-style:normal; }  
              .form_container h1 { font-style:bold; background-color:#FFBA10; border:1px solid black; font-size:15px; padding:2px 2px 2px 5px; }  
              .button_save { font-weight:bold; width:160px; background-color:white; border:1px solid red; margin:5px 0px 0px 160px; }  
              .form_container label { height:15px; margin:0pt 10px 0pt 0pt; padding:0pt; text-align:left; width:150px; white-space:nowrap; float:left; }  
              
              
                
              </style>  
              </head>  
              <body>  
                
              <div class="form_container">  
               <h1> Pers&ouml;nliche Daten </h1>  
                <p>  
                  <label>Vorname</label>  
                  <select><option>eins</option><option>zwei</option></select>  
                
                  <!-- Auf diese explizite Angabe moechte ich gerne verzichten -->  
                  <label style="float:none;">Vorname2</label>  
                  <select><option>eins</option><option>zwei</option></select>  
                </p>  
                <p><label>Nachname</label> <input /></p>  
                <p><label>Straße</label> <input type="checkbox" class="form_checkbox"></p>  
                <p><em>Dies ist ein Beschreibungstext Lorem Ipsu Dolerem Ipsu Lorem PibumLorem Ipsu Dolerem Ipsu Lorem Pibum</em></p>  
                <p><label>PLZ</label> <input /> <strong>Dieses Feld darf nur Ziffern beinhalten</strong></p>  
                <p><label>Bemerkung</label> <textarea/></textarea></p>  
                <p><input type="submit" class="button_save"></p>  
              </div>  
                
              </body>  
              </html>  
              
              

              Nun habe ich jedoch Probleme, wenn ich zwei Formularelemente nebeneinander
              aufreihen moechte. Die Stelle habe ich in dem Code oben mit einem Kommentar
              versehen. Gibt es da eine einfache Moeglichkeit dass mittels CSS zu realisieren,
              ohne dabei die Styles direkt angeben zu muessen?

              Nochmal besten Dank.

              MfG,
              Sympatisant

              --
              "Non dura iubeantur, non prohibeantur inpura."
              1. Hallo,

                meine derzeitige Loesung ist nun, dass ich fuer die Elemente, die
                in der selben Reihe stehen sollen, eine Klasse mitangebe:

                CSS

                  
                .form_container .second_column {  
                 float:none;  
                 margin-left:20px;  
                }  
                
                

                HTML

                  
                <p>  
                  <label>Vorname</label>  
                  <select><option>eins</option><option>zwei</option></select>  
                  
                  <!-- hier wird die Klasse explizit angegeben -->  
                  <label class="second_column">Vorname2</label>  
                  <select><option>eins</option><option>zwei</option></select>  
                </p>  
                
                

                Naja, eine Loesung mit der ich wohl Leben kann.
                Wenn einer noch eine bessere Loesung weiss, so habe ich nichts
                dagegen mich daran teilhaben zu lassen ;-)

                MfG,
                Sympatisant

                --
                "Non dura iubeantur, non prohibeantur inpura."
              2. ohne dabei die Styles direkt angeben zu muessen?

                klassen sind das stichwort

                allerdings solltest du

                <div class="form_container"> </div>

                gegen
                <form> </form>

                ersetzen und

                <h1> Pers&ouml;nliche Daten </h1>

                gegen

                <fieldset>
                 <legend>Persönliche Daten</legend>
                 [...]
                </fieldset>

                bei richtiger zeichencodierung sind html-entities für umlaute übrigens überflüssig

                1. Hallo,

                  ah, OK, danke.

                  Allerdings bin ich mitterweile ganz schoen frustriert!

                  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. (*)

                  Dann gibt es da ja auch noch den Moloch von selfhtml:
                  http://aktuell.de.selfhtml.org/weblog/ansatz-fuer-flexible-mehrspaltige-formulare
                  Doch in dem Beispiel werden die Labels jeweils _ueber_ die Inputfelder
                  gestellt, und zum anderen finde ich das dermassen uebertrieben und aufgeblaeht,
                  dass einem der Spass vergeht.
                  Ich meine, hunderte Zeilen an CSS nur fuer ein Formular. Das kann es
                  doch echt nicht sein.

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

                  (*) Mit Copy&Paste sollte es direkt funktionieren..

                    
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
                  <html>  
                  <head>  
                   <title>Test</title>  
                    
                    
                  <style type="text/css">  
                  
                  
                    
                    
                  .form_container input {  
                   width:160px;  
                  }  
                  .form_container select {  
                   width:164px;  
                  }  
                  .form_container textarea {  
                   width:300px;  
                   height:150px;  
                  }  
                  .form_container .form_checkbox  {  
                   height:16px;  
                   width:22px;  
                   margin-left:-4px;  
                  }  
                  .form_container p {  
                   padding:0px;  
                   margin:2px 0px 2px 0px;  
                  }  
                  .form_container strong {  
                   color:red;  
                  }  
                  .form_container em {  
                   font-style:normal;  
                  }  
                  .form_container h1 {  
                   font-style:bold;  
                   background-color:#FFBA10;  
                   border:1px solid black;  
                   font-size:15px;  
                   padding:2px 2px 2px 5px;  
                  }  
                  .button_save {  
                   font-weight:bold;  
                   width:160px;  
                   background-color:white;  
                   border:1px solid red;  
                   margin:5px 0px 0px 160px;  
                  }  
                  .form_container label {  
                   height:15px;  
                   margin:0pt 10px 0pt 0pt;  
                   padding:0pt;  
                   text-align:left;  
                   width:150px;  
                   white-space:nowrap;  
                   float:left;  
                  }  
                  .form_container .second_column {  
                   float:none;  
                    
                  }  
                  .form_container .long_element {  
                   width:600px;  
                  }  
                  
                  
                    
                    
                  </style>  
                    
                  </head>  
                    
                  <body>  
                    
                    
                  <div class="form_container">  
                   <h1> Pers&ouml;nliche Daten </h1>  
                    <p>  
                      <label>Vorname</label>  
                      <select class="long_element" ><option>eins</option><option>zwei</option></select>  
                    </p>  
                    
                    <p>  
                      <label>Hausnummer</label> <input />  
                      <label class="second_column">Manchmal</label> <input />  
                    </p>  
                    
                    <p>  
                      <label>Nachname</label> <input />  
                      <label class="second_column">Nachname des Angehoerigen</label> <input />  
                    </p>  
                    
                    <p>  
                      <label>Straße</label>  
                      <input type="checkbox" class="form_checkbox">  
                    </p>  
                    
                    <!--<p>  
                      <em>Dies ist ein Beschreibungstext Lorem Ipsu Dolerem Ipsu Lorem PibumLorem Ipsu Dolerem Ipsu Lorem Pibum</em>  
                    </p>-->  
                    
                    <p>  
                      <label>PLZ</label>  
                      <input />  
                      <!-- <strong>Dieses Feld darf nur Ziffern beinhalten</strong> -->  
                    </p>  
                    
                    <p>  
                      <label>Bemerkung</label> <textarea /></textarea>  
                    </p>  
                    
                    <p>  
                      <input type="submit" class="button_save">  
                    </p>  
                  </div>  
                    
                  </body>  
                  </html>  
                  
                  

                  Waere fuer jede Hilfe dankbar.

                  MfG,
                  Sympatisant

                  --
                  "Non dura iubeantur, non prohibeantur inpura."
                  1. 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

          2. Das ist der einzige Punkt, der mich allerdings noch stoert.
            Denn im Falle von dynamisch erzeugten Formularen kann man ja einfach
            nicht wissen wie lang die maximale Laenge sein wird.

            was hälst du von dem magischen wort "zeilenumbruch"?

            die einzelbeschriftungen werden wohl in halbwegs praktikabler länge bleiben, wenn man eine maximalbreite definiert, kommt man damit gut klar

            für länger textpassagen (datenschutz/fragen usw) kommst du um einen zeilenumbruch ohnehin nicht rum

            zudem auch wenn dein layout in einer tabelle mit dynamischen spaltenbreiten perfekt aussieht, du kannst nie wissen, wie gross der viewport des benutzers ist, wie gross die schrift usw - im schlimmsten fall ist die label-spalte so breit, dass der benutzer horizontal scrollen muss, um zu den eingabefeldern zu gelangen

            1. Salvete,

              was hälst du von dem magischen wort "zeilenumbruch"?

              Hehe.. da kam ich gerade auch drauf ;-)

              MfG,
              Sympatisant

              --
              "Non dura iubeantur, non prohibeantur inpura."
  2. Hallo,

    so, ich habe jetzt eine fuer mich zufriedenstellende Version..
    ..mit relativ wenig CSS und der Moeglichkeit mehrere Spalten anzuzeigen.

    Hier der Code:

      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html>  
    <head>  
     <title>Multicolumn Formular based on CSS</title>  
      
      
    <style type="text/css">  
    
    
      
    /* -- Styles for the Input-Fields */  
    .form_container input { width:160px; float:left; margin-right:10px; }  
    .form_container select { width:164px; margin-right:10px; }  
    .form_container textarea { width:465px; height:150px; margin-right:10px; }  
    .form_container .form_checkbox  { height:16px; width:22px; margin-left:-3px; margin-right:155px; }  
    .form_container .long_element { width:469px; }  
    .form_container .short_element { width:50px; margin-right:120px; }  
      
    /* -- Styles for Text */  
    .form_container strong { color:red; }  
    .form_container em { font-style:normal; }  
    .form_container h1 { font-style:bold; background-color:#FFBA10; border:1px solid black; font-size:15px; padding:2px 2px 2px 5px; }  
    .form_container label { height:15px; margin:0pt 10px 0pt 0pt; padding:0pt; text-align:left; width:120px; white-space:nowrap; float:left; }  
      
    /* -- Styles for Buttons */  
    .button_save { font-weight:bold; width:160px; background-color:white; border:1px solid #FFBA10; margin:5px 0px 0px 130px; }  
      
    /* -- Container Styles */  
    .form_container { border-width:0px; }  
    .form_container p { padding:0px; margin:2px 0px 2px 0px; clear:both; }  
    .form_container div { clear:both; }  
    
    
      
      
    </style>  
      
    </head>  
      
    <body>  
      
      
    <fieldset class="form_container">  
     <h1> Pers&ouml;nliche Daten </h1>  
      <p>  
        <label>Vorname</label>  
        <select class="long_element" ><option>eins</option><option>zwei</option></select>  
      </p>  
      
      <p>  
        <label>Hausnummer</label>  
        <input class="short_element"/>  
        <label>Manchmal</label>  
        <input />  
        <!-- auch drei Spalten moeglich  
        <label>Manchmal3</label>  
        <input />  -->  
      </p>  
      
      <p>  
        <label>Nachname</label> <input />  
        <label>Angehoeriger</label> <input />  
      </p>  
      
      <p>  
        <label>Kunde</label>  
        <input type="checkbox" class="form_checkbox">  
        <label>Kundennummer</label>  
        <input class="short_element"/>  
      </p>  
      
      <p>  
        <label>PLZ</label>  
        <input class="short_element" />  
      </p>  
      
      <p>  
        <label>Bemerkung</label>  
        <textarea /></textarea>  
      </p>  
      
      <p>  
        <input type="submit" class="button_save">  
      </p>  
      
    </fieldset>  
      
    </body>  
    </html>  
    
    

    MfG,
    Sympatisant

    --
    "Non dura iubeantur, non prohibeantur inpura."