Vandaag de dag wordt er veel gebruik gemaakt van formulieren. Je kunt hierbij denken aan een contactformulier of een reserveringsformulier. Natuurlijk wil je zo'n formulier ook een zodanige opmaak geven dat het perfect binnen het design van je website past. Vaak worden voor de opmaak van formulieren tabellen gebruikt. In HTML zou het er dan zo uit kunnen zien:

<form action="een_script.cgi" method="post">
<table>
<tr>
<td>Naam:</td>
<td><input type="text" name="naam"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Aanmelden"></td>
</tr>
</table>

 In een browser zou dit er zo uitzien:

Dit werkt prima, maar er is ook een alternatief. Eigenlijk is het niet de bedoeling om tabellen voor opmaak te kiezen aangezien tabellen meer bedoeld zijn om data gestructureerd weer te geven. In dit artikel gaan we een andere aanpak gebruiken om een formulier te ‘stylen'. Laten we nu gelijk de andere aanpak bekijken:


<form action="een_script.cgi" method="post">
<fieldset>
<legend>Aanmeldformulier</legend>
<label for="naam">Naam:</label>
<input type="text" name="naam" id=" naam " />
<label for="email">Email:</label>
<input type="text" name="email" id="email" />
<input type="submit" name="submit" value=" Aanmelden "/>
</fieldset>
</form>

 In een browser zou dit er zo uitzien:

Zoals je kunt zien is er een kader verschenen rondom het formulier. Dit kader is het resultaat van de fieldset-tag. Het kader loopt rechts door tot de breedte van het browservenster. Dit willen we natuurlijk niet. De breedte van het kader gaan we dus nog wijzigen. Dit gaan we in een vervolgartikel bekijken.

In de HTML-code zie je verder dat er gebruik is gemaakt van de HTML-tags legend en label. Ook heeft ieder tekstveld een id gekregen dat correspondeert met de waarde van het attribuut ‘for' in de label-tag

Van uitlijning of opmaak is nog geen sprake. Ook staan alle elementen van het formulier achter elkaar opgesomd. Wat je zou willen is dat de input-velden perfect onder elkaar zouden staan. Dit gaan we allemaal oplossen met behulp van van CSS. Door nu de onderstaande CSS-code te gaan gebruiken voor de label-tags zul je zien dat de input-velden keurig onder elkaar uitgelijnd worden.

 <style>
label
{
display: block;
}
</style>

Deze code hoort thuis tussen de < head> en < /head> tag van je html-document waarin je ook het formulier hebt geplaatst. Het resultaat ziet er dan als volgt uit in de browser:

 Zoals je ziet begint het formulier er al fraaier uit te zien, maar we gaan nog verder. Dit kun je lezen in het vervolgartikel.