Dit formulier is het resultaat van onderstaande code:

<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>

De CSS die hierbij hoort is:

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

 Om ervoor te zorgen dat de labels van de inputvelden onder elkaar komen te staan aan de linkerkant van je scherm hebben we de "float: left" CSS-code toegevoegd. De andere codes zijn puur voor de opmaak van de tekst.

 <style>
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
</style>

 In de browser ziet het er dan zo uit:

We voegen nog een
tag toe achter de inputvelden om de regel af te breken. Verder voegen we een CSS-class toe aan de submit-knop. Deze zullen we later nodig hebben.

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

 Het resultaat is dan:

Nu gaan we ervoor zorgen dat de knop verticaal uitgelijnd wordt onder de 2 tekstvelden. We hebben al een CSS-class aan de submit-knop toegevoegd. We voegen onderstaande code toe tussen de < style> en de < /style> tag.

 .submit input
{
margin-left: 4.5em;
}

 In bovenstaande afbeeldingen zie je dat de rand rond het formulier doorloopt. Om dit aan te passen geven we de fieldset-tag een breedte.

fieldset
{
width: 20em;
}

 Het voorlopige eindresultaat ziet er dan als volgt uit:

Volgende keer gaan we kleur geven aan het formulier. Probeer zelf al eens extra velden toe te voegen aan het formulier. Ook kun je eens met de CSS-waarden spelen om te kijken wat voor effect het heeft.

Veel succes!