p oder div zur unterteilung bei formularen

[Kropff]

ich sitze gerade an einem tutorial über formulare und stelle mir folgende frage. innerhalb eines fieldsets habe ich mehrere elemente, wo ich später per css vertikale abstände festlegen möchte. nehme ich für die unterteilung nun ein p oder ein div. also entweder so:

<fieldset>
  <legend>Adresse</legend>
  <p>
    <label for="vorname">Vorname</label>
    <input type="text" name="vorname" id="vorname" />
  </p>
  <p>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
  </p>
  ...
</fieldset> 

oder so:

<fieldset>
  <legend>Adresse</legend>
  <div>
    <label for="vorname">Vorname</label>
    <input type="text" name="vorname" id="vorname" />
  </div>
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
  </div>
  ...
</fieldset> 

imho ist das sukijaki (also jacki wie hosi), aber vielleicht hat einer von euch dazu eine eigene meinung. offenbar sind beide varianten regelkonform.

peter

[lennart]

Ich würde aus dem Bauch heraus <p>'s nehmen. Warum kann ich dir aber nicht sagen. Ist beides okay denke ich.

[php_fussel]

Aaaaaaaaaaaaaaalsoooooooooooooooo ... Scherz !
Ich denke mal, das ist jedem selbst überlassen. Hauptsache es funzt zum Schluss! Man könnte ja auch eine Tabelle nehmen ... Scherz !
Aber ich denke eine Definitionsliste ist auch nett ...

<fieldset>
 <legend>Kontaktformular</legend>
  <div id='info'>Titeltext</div>
   <form name='contact' action='...' method='post'>
    <dl>
      <dt>
        <label for=inputName>Name</label>
           <dd>
              <input id='inputName' name='name' value='...' type='text'>
      <dt>
         <label for=inputEmail>Email</label>
            <dd>
               <input id='inputEmail' name='email' value='...' type='text'>
      <dt>
          <label for=textareaMessage>Nachricht</label>
            <dd>
                <textarea id='textareaMessage' name='message'>
                </textarea>
      </dl>
      <div id='imageSubmit'>
            <input name='submit' type='image'src='button_versenden.gif' value='send'>
       </div>
   </form>
</fieldset> 

Gruß php_fussel

[lennart]

Ich nehme für meine Formulare auch Definitioslisten. Kropff möchte hier aber glaube ich eher Formularbereiche abgrenzen und nicht nur einzelne Felder/Labels.

[Kropff]

@ php_fussel und lennart
ihr habt auch nichts vernünftiges zu tun?

also das mit den definitionslisten ist ganz interessant. aber warum? ich habe damit bei formularen noch nie gearbeitet. bin auch noch nicht auf die idee gekommen. andere meinungen?

Kropff möchte hier aber glaube ich eher Formularbereiche abgrenzen und nicht nur einzelne Felder/Labels.

doch, will ich.

peter

[Blackgreetz]

Welche Antwort würdest du auf die Frage:

"Ist das ein Absatz oder ein Bereich?" geben?. (@Kropff, oder wer will)

mfg

[Kropff]

Original geschrieben von Blackgreetz
Welche Antwort würdest du auf die Frage:

"Ist das ein Absatz oder ein Bereich?" geben?. (@Kropff, oder wer will)

mfg

keine ahnung , darum frag ich ja auch. wie schon gesagt, ist das imho lattens. hier geht es nur um meinungen, nicht um tatsachen .

peter

[Blackgreetz]

Hm. Sone Antwort kann man auch intuitiv geben :P

Ich würd auf die Frage wohl eindeutig Absätze antworten.
Für mich ist ein Fieldset schon eine Art Bereich .. nur mit Rahmen und ner Legende..
Natürlich kann man Bereiche auch wieder mit Bereichen verschachteln, aber da ja dann nur noch Text reinkommt.. nunja -> eher nen Absatz (denk ich)

Allerdings ist die Sache mit der Liste (welche is mir egal) nicht uninteressant, denn bei einem Formular kannst du auch die einzelnen Formularpunkte als Listenpunkte interpretieren.

Also würd ich eher die Frage stellen, ob <p> oder <ul>, da ich div, wie erwähnt, ausschließen würde.

mfg

[php_fussel]

In dem Tutorial würde ich dann auch noch so Sachen wie ...

<input id='inputName' name='name' value='...' type='text' 
tabindex='1' class='textinput' onFocus="this.style.border='2px solid 
#ff0000';" onBlur=\"this.style.border='2px solid #000000';"> 

... aufführen. Oder das man den Feldwert, wenn er mal gesetzt wurde, aber noch was korrigiert werden muss, mit z.B. value='$name' PHP-seitig wieder füllen kann, so dass der Benutzer dies nicht noch mal machen muss ... ich denke, Sie wissen, was ich meine!


Gruß php_fussel

[PHP-Desaster]

Ich würde auf die einzelne Kapselung von label und input komplett verzichten. Mit dem passenden CSS kommt man ohne doch genauso gut klar
Übrigens: Eine Definitionsliste dafür zu verwenden, nur weil das Browserverhalten ungefähr dem entspricht, was als Ergebnis rauskommen sollte, ist doch Blödsinn, dabei handelt es sich definitiv um keine Definitionsliste. Und eine einfache Liste braucht man auch nicht, wie gesagt, mit dem richtigen CSS kann man sich den Container sparen.

[php_fussel]

Hallo,

da bin ich anderer Meinung, den eine Definitonsliste ist hier (meiner Meinung nach) passend, da ich ja einzelne Abschnitte "definiere". Ich habe einen Namen (der zu definierende Begriff), der zu einem Eingabefeld für den Namen (Definitionsbeschreibung) gehört, diese beiden stehen durch das Label-Element (durch die id) in direktem Bezug und das verhält sich für die anderen Bereiche genauso. Natürlich könnte man das auch rein mit CSS lösen ... CSS wird aber eh eingesetzt (sollte man jedenfalls). Und ich denke, dass man das Layout durch die einzelnen Elemente (Knoten) der Liste wesentlich ansprechender (und vielleicht auch einfacher) designen kann, da ich mehr "Angriffspunkte" habe, als wenn ich CSS nur auf die input-Elemente alleine ansetze ...

Gruß php_fussel

[wahsaga]

Original geschrieben von Kropff

Kropff möchte hier aber glaube ich eher Formularbereiche abgrenzen und nicht nur einzelne Felder/Labels.

doch, will ich.

Weitere Moeglichkeit:

label { display:block; margin-top:...; margin-bottom:...; }

<label>Vorname: <input type="text" name="vorname" id="vorname" /></label> 

[php_fussel]

Da hat der Herr wahsaga aber ein "rausgehauen" ... funktioniert, schöne Lösung!

Gruß php_fussel

[lennart]

Wusste garnicht dass es erlaubt ist ein input in ein label zu legen. Danke für den Tipp.

[ghostgambler]

Semantisch gesehen hat das input im label soviel zu suchen wie eine Schuhsohle auf Toastbrot... ist meine Meinung. Mag man nicht teilen, mir egal.

<label><input>
<label><input>
label, input {float:left; display:block; width:200px;}
label {clear:left;}
oder sowas in der Art funktioniert auch.