[xhtml/form] tabel of div's?

[chris]

Zoals sommige mensen al gemerkt hebben hier, ben ik met een remake van m'n site bezig. Ik zet m'n huidige site om naar xhtml en css, vooral om zelf van te leren, maar het is natuurlijk ook gewoon heel erg fijn .

Ik wil nu mijn contact-formulier omzetten, maar ik weet nog niet hoe ik dit wil gaan doen, met <table> of met <div>'jes.

Waar ik zelf aan zat te denken (ff gesimplificeerd):

HTML:

<form id="contactForm">
  <div id="contactField">
    Naam:
    <div id="inputField">
      <input type="text" name="naam" />
    </div>
  </div>
</form>

en dan die #inputField op float: right zetten.

maar natuurlijk kan ook:

HTML:

<form id="contactForm">
  <table>
    <tr>
      <td>
        Naam
      </td>
      <td>
        <input type="text" name="naam" />
      </td>
    </tr>
  </table>
</form>

Wat lijkt jullie het beste/elegantste? Ik ben namelijk erg benieuwd, want opzich is zo'n formulier wel tabular data, maarja...

[coubertin119]

Op quirksmode.org staat een voorbeeld van wat jij wil zonder het gebruik van <div>'s of <table>'s, wie weet kan je daar je inspiratie halen .

[Brakkie]

Ik doe het zo.

code:

<form method="post" action="index.php" enctype="multipart/form-data">
                        
                            <div class="formrow">
                                <span class="formheader">Maak een fotoalbum aan.</span>
                            </div>
                            <div class="formrow">
                                <span class="formtext">&gt; Geef informatie over het fotoalbum.</span>
                                <hr />
                            </div>
                            <div class="formrow">
                                <label for="album-name">De titel van het fotoalbum.</label>
                                <input type="text" name="album_name" class="textnormal" id="album-name" />
                                <div class="spacer"><br /></div>
                            </div>
                            <div class="formrow">
                                <label for="album-description">De beschrijving van het fotoalbum.</label>
                                <textarea name="album_description" class="textareanormal" id="album-description"></textarea>
                                <div class="spacer"><br /></div>
                                <div class="spacer"><br /></div>
                                <div class="spacer"><br /></div>
                                <div class="spacer"><br /></div>
                            </div>
</form>

En de CSS.

code:

#content #form {background-color : #E7EAEF;margin: 0px;padding: 10px;}
#content #form h3 { font-size : 16px; color:black; margin:0px; margin-bottom: 5px;}
#content #form label {display:block; float:left; width:270px; font-size : 12px;}

#content #form .formrow {margin-left: 5px; margin-bottom:5px; padding:5px;}
#content #form .textnormal {display:block; float:right;margin:0px; width:210px; border: 1px solid black;}
#content #form .textareanormal {display:block; float:right;margin:0px;width:210px; height:75px; border: 1px solid black;}
#content #form .selectmultiple {display:block; float:right;margin:0px; width:210px; height:75px;}
#content #form .selectnormal {display:block; float:right;margin:0px; width:210px;}
#content #form .checkboxnormal {display:block; float:right;margin:0px; width:210px;}
#content #form .radionormal {display:block; float:right;margin:0px; width:210px;}
#content #form .buttonnormal {float:right;margin:0px; margin-left:2px; width:104px; font-size:12px; }
#content #form .formtext {width:100%; font-size : 13px; font-weight:bold;}
#content #form .description {font-size : 11px;font-style : italic;}
#content #form .formheader {width:100%; font-size : 16px; font-weight:bold;}

Weet niet of het optimaal is maar voor mij werkt het goed.

[chris]

coubertin119 schreef op 11 januari 2004 @ 19:13:
Op quirksmode.org staat een voorbeeld van wat jij wil zonder het gebruik van <div>'s of <table>'s, wie weet kan je daar je inspiratie halen .

Da's inderdaad precies wat ik wil, ik zie net dat ik die site al in een tab open had staan, maar op een of andere manier overheen heb gekeken. De exacte url (voor mensen die dit topic nog een keer tegenkomen via de search): http://www.quirksmode.org/css/forms.html

[Zoolander]

Ik zou wel voor de DIV gaan, maar wat je zegt: form is meestal wel tabular.
Wat ik momenteel vaak doe is een table in een DIV.
Maar met CSS kan je natuurlijk je DIV´s wel heeeel goed besturen

[Verwijderd]

Check gewoon even de specificatie: http://www.w3.org/TR/1999...91224/interact/forms.html

Genoeg elementen: <fieldset>, <legend>, <label> om je informatie in te zetten lijkt me.

[Bluestorm]

Ik gebruik meestal een middenweg...

HTML:

<div class="field">
       <label>Textlabel</label>
       <div class="value">.........input control........</div>
</div>

waarom niet direct label gevolgd door input... omdat ik nogal eens eigen controls wil hebben bestaande uit wat meer html dan één input element. Verder vind ik het wel zo netjes om label en control te groeperen. Ze horen toch wel erg bij elkaar... en dan heb je ook dat onzinnige <br /> niet nodig.


Trouwens... Brakkie:

code:

 <div class="spacer"><br /></div>

Er bestaat ook zoiets als margin-bottom. Je helpt nu heel mooi je flexibiliteit die je met CSS verkrijgt weer om zeep. Wat als je nu opeens minder marge wil... moet je alsnog je html aanpassen.

[ Voor 29% gewijzigd door Bluestorm op 11-01-2004 19:52 ]

[Brakkie]

Het posten van die xhtml was ook een beetje bedoeld om te vissen naar kritiek Ga er even mee aan de slag.

[chris]

Het werkt erg fijn allemaal, alleen ik heb nog gezeik met m'n submit-knop.

In Mozilla en Opera blijft dat knopje mooi links staan, maar in internet explorer gaat ie 'm ineens een stuk verplaatsen:

voorbeeld.

Erg vreemd, heeft iemand een idee hoe dit komt?

[Verwijderd]

Waarom die BR, je kunt toch ook P margin geven?