Een form zonder table!

1 op phpfreakz.nl staat een goed artikel over centreren en hoe dat moet.


3. Denk niet dat het echt uitmaakt,div vind ik wel leuker.

edit: en daarnaat komt het wachtwoord in de balk, niet echt handig.

Ik heb er ook een beetje studie van gemaakt en doe het tegenwoordig zonder tables. Of ze XHTML valid zijn betwijfel ik, maar ik vind validatie niet echt zaligmakend.

De opmaak van een form is meestal:

label - input

Als je de labels deze CSS geeft:

label {
    float: left;
    width: 140px;
    text-align: right;
}

Dan kun je de rijen in je form zo coderen:

<p>
    <label for="veldnaam">veldnaam:</label>
    <input id="veldnaam" type="text">
</p>

@Kalle: Voor centreren zal ik morgen kijken.


@Jan: Bedankt. Ik heb iets online gezet (janform.html). Is dat ongeveer wat je bedoelt?
Heb je zelf ook een voorbeeld van zoiets en zou ik het mogen zien?

Sebastiaan schreef op 02.04.2006 20:04

@Kalle: Voor centreren zal ik morgen kijken.

Ach ik neem het niet zo nauw. Je bent nog jong en klein dus lezen is best lastig.

Lijkt me compleet zinloos om het zo op te lossen met DIVjes... Tabellen zijn gemaakt om informatie in te plaatsen, dus waarom moeilijker maken.. De manier van Jan is ook wel leuk gezien, maar deze heb ik nooit echt gebruikt... (;

Sebastiaan, wat is het verschil tussen tabellen en jouw variant? Alleen een verschil in tag-naam? (je geeft namelijk de opdracht via je CSS om gewoon een complete tabel te renderen, op tbody na dan)

Jan's aanpak is al wat beter, al is <paragraaf> daar niet voor bedoelt, en geeft het nogal een vreemd resultaat in Lynx daardoor.

Ik zou gewoon gaan voor een label, met daaronder het veld. Met display:block dus, geeft een beetje het fieldset-legend effect. Met margin en padding kan je hem dan er nog wat spelen, resultaat om tevreden mee te zijn.

centreren wil eigenlijk altijd wel via margin: 0 auto; of desnoods text-align: center; (IE workaround)

Sebastiaan, wat is het verschil tussen tabellen en jouw variant? Alleen een verschil in tag-naam?

Klopt, niet veel, ik ben er zelf ook niet super trots op.

k zou gewoon gaan voor een label, met daaronder het veld.

Zoiets als dit dus?:
<label for="veld">Veld:</label><br />
<input type="text" id="veld">

centreren wil eigenlijk altijd wel via margin: 0 auto; of desnoods text-align: center; (IE workaround)

Oké. Bedankt.

Sebastiaan schreef op 02.04.2006 20:04

@Jan: Bedankt. Ik heb iets online gezet (janform.html). Is dat ongeveer wat je bedoelt?
Heb je zelf ook een voorbeeld van zoiets en zou ik het mogen zien?

Ja, bijvoorbeeld het inschrijfformulier voor het PHPuitje. Kijk de CSS maar na daar.