[CSS/(X)HTML] Semantisch correct gebruik van een <form />

[MarkvE]

Ik kon het niet vinden, en ik zou het eigenlijk wel eens willen weten wat nu de standaard of meest gebruikelijke manier hiervoor is. Dus heel kort, maar krachtig:

Hoe maak je een (semantisch correct) formulier in (X)HTML dat je opmaakt via CSS?

[André]

HTML:

<style>
  form {
    border: 1px solid #000000;
  }
</style>
<form class="formulier">
  <input type="text">
  <input type="submit" value="Verstuur">
</form>

Zo? Dit is een semantisch correct formulier. Wat bedoel je precies, waar wil je heen, wat stel je ter discussie, hoe zie jij het, enz?

[MarkvE]

Ik zal wat verduidelijken. Doorgaans heb ik een formulier dat ik (heel minimalistisch voorbeeld, dus geen accesskey attributen e.d.) zo beschrijf:

code:

<h2>Formulier</h2>
<form method="post" action="">
    <ul>
        <li>
            <label for="username">Gebruikersnaam</label>
            <input type="text" name="username" id="username" />
        </li><li>
            <label for="password">Paswoord</label>
            <input type="password" name="password" id="password" />
        </li><li>
            <button type="submit">Inloggen</button>
            <button type="reset">Leeg velden...</button>
        </li>
    </ul>
</form>

Ik denk dat dit zo de juiste manier is. Maar om dit te stijlen via CSS vind ik een enorme rot klus. Ik krijg het niet lekker voor elkaar wanneer ik het zeg maar op de manier waarop GoT het ook heeft opgesteld wil hebben (dus alles netjes uitgelijnd, en bijv. de buttons onder de input velden.)

[André]

Maar dat heeft toch niets met semantiek te maken, dat is gewoon een kwestie van de juiste css toepassen.

[crisp]

Ik zou eerder voor een definition-list gaan, maar een table is imho in sommige gevallen voor bepaalde formulieren ook nog wel te verdedigen:

HTML:

<form action="bla.php" method="post">
    <fieldset>
        <legend>Personalia</legend>
        <dl>
            <dt><label for="naam">Naam</label></dt>
            <dd><input type="text" name="naam" id="naam /></dd>
            <dt><label for="adres">Adres</label></dt>
            <dd><input type="text" name="adres" id="adres" /></dd>
            <dt><label for="woonplaats">Woonplaats</label></dt>
            <dd><input type="text" name="woonplaats" id="woonplaats" /></dd>
        </dl>
        <input type="submit" value="verstuur" />
    </fieldset>
</form>

[Verwijderd]

PPK heeft er een artikeltje over geschreven. Tabelloze formulieren, maar wel met mooie uitlijning, door de <label>'s te stylen.

[ Voor 3% gewijzigd door Verwijderd op 13-09-2004 14:27 ]

[MarkvE]

crisp schreef op 13 september 2004 @ 14:26:
Ik zou eerder voor een definition-list gaan, maar een table is imho in sommige gevallen voor bepaalde formulieren ook nog wel te verdedigen:

HTML:

<form action="bla.php" method="post">
    <fieldset>
        <legend>Personalia</legend>
        <dl>
            <dt><label for="naam">Naam</label></dt>
            <dd><input type="text" name="naam" id="naam /></dd>
            <dt><label for="adres">Adres</label></dt>
            <dd><input type="text" name="adres" id="adres" /></dd>
            <dt><label for="woonplaats">Woonplaats</label></dt>
            <dd><input type="text" name="woonplaats" id="woonplaats" /></dd>
        </dl>
        <input type="submit" value="verstuur" />
    </fieldset>
</form>

Oké, deze is nog wat specifieker en beter dan die van mij. Maar nu de vraag, hoe maak je zoiets op met CSS, zonder je in allerlei lastige bochten te wringen.

[Sosabowski]

crisp schreef op 13 september 2004 @ 14:26:
id="naam />

mierenneukmode:
id="naam" />

overigens wel een mooie oplosing IMHO

[X-Lars]

Als je het semantisch correct wil hebben, kan het ook wel zonder (definition) lists of tables. Zie ook de link van Nokia. Het gaat vooral om het juiste gebruik van CSS. Het is maar wat je wilt: semantische correctheid of eenvoudigere CSS, dat is ongeveer de afweging die je maakt. Maar zo lastig is dat CSS in dit geval niet.

[MarkvE]

Verwijderd schreef op 13 september 2004 @ 14:26:
PPK heeft er een artikeltje over geschreven. Tabelloze formulieren, maar wel met mooie uitlijning, door de <label>'s te stylen.

"This CSS doesn't work in Explorer 5.0 Windows."

Dat is toch wel een groot minpunt. Daarentegen is het niet op de manier waarop bijv. Crisp zijn formulier opstelt.

[Verwijderd]

een dl is imho niet nodig, omdat een fieldset de boel al groepeerd en de labels al gekoppeld worden aan de inputs, dus die dt, dd constructie is ook wat overbodig

mijn formulieren zien er iha zo uit:

code:

<form>
  <fieldset>
    <legend />
    <label><input /></label><br />
   ...
  </fieldset>
</form>

(zonder attributen en textnodes)

of per item: <label /><input /><br />

dan kan je de hele boel breedte geven, left floaten. Die br is voor non css browsers.

[crisp]

voorbeeld opmaak van een form met definition-list: http://crew.tweakers.net/crisp/newlayout/list_messages.html
Formulieren zoals voor edit_user en preferences doe ik trouwens nog wel met een table (ik zal daar ook eens een preview van bakken).
Het voordeel van een definitionlist vind ik dat de opmaak in non-CSS browsers toch ietsje duidelijker is.

IE is trouwens brak met labels:

HTML:

<label><input type="checkbox" name="check" value="1" /> vink mij aan!!!111</label>

klikken op de tekst om aan te vinken werkt hier niet in IE, maar in het volgende voorbeeld wel:

HTML:

<input type="checkbox" name="check" value="1" id="check" /> <label for="check">vink mij aan!!!111</label>

ook is IE brak mbt het button-element:

HTML:

<form method="post" action="bla.php">
  <input type="text" name="test" value="tralala" /><br />
  <button name="foo" value="bar" type="submit">Doet eens lief submitten</button>
</form>

Dit heeft 1 voordeel: IE doet wel altijd een value meesturen voor het button-element - ook bij submit met enter in het text-field. Jammer is alleen dat IE de verkeerde waarde meestuurd; namelijk de tekst tussen <button> en </button> ipv de waarde van het value-attribuut De hele toegevoegde waarde van het button-element (richer formatting) is hiermee dus helemaal weg...

[ Voor 4% gewijzigd door crisp op 13-09-2004 15:09 ]

[kleautviool]

Wat ikzelf altijd een makkelijke manier vind om mijn formulieren te stylen is door de labels en input velden in een span te zetten. Ok een span zeg semantisch niets, maar is wel makkelijk om met CSS nu te bepalen hoe je je formulier wilt hebben. Ik doe het meestal zoiets:

HTML:

<form>
  <fieldset>
    <legend />
    <span><label for="veld">Veld:</label><input /></span>
    <span><label for="veld">Veld:</label><input /></span>
  </fieldset>
</form>

en dan zo'n soort stylesheet ofzo

Cascading Stylesheet:

label{
 float:left;
 width:150px;
}
span{
 display:block;
}

Dit werkt wel goed voor mij

[Verwijderd]

als je een span op display: block zet, doe dan een div
overigens los ik dit dus op door die br een clear: both te geven, want in non css browsers, komt het hier nog steeds op 1 lijn