CSS:
label{
display: block;
}
fieldset{
width: 250px;
padding: 5px 0 10px 10px;
border: 1px solid #000;
font-family: verdana;
}
legend{
background-color: #000;
color: #FFF;
font-weight: bold;
padding: 4px 6px 4px 6px;
text-transform: uppercase;
margin: 0 0 5px 0;
font-size: 0.8em;
}
input{
margin: 2px 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: #DDD;
width: 200px;
}
.button{
background-color: #000;
color: #FFF;
font-weight: bold;
width: auto;
margin: 0 5px 0 0;
padding: 1px 5px 2px 5px;
cursor: pointer;
}
HTML:
<form name="personalia" action="" method="post">
<fieldset>
<legend>persoonlijke gegevens</legend>
<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" />
<label for="achternaam">achternaam:</label>
<input type="text" name="achternaam" id="achternaam" />
<label for="woonplaats">woonplaats:</label>
<input type="text" name="woonplaats" id="woonplaats" />
<label for="aanhef">aanhef:</label>
<select name="aanhef" id="aanhef">
<option>Dhr.</option>
<option>Mevr.</option>
</select>
<input class="button" type="submit" name="submit" value="cook!"/>
<input class="button" type="reset" name="reset" value="wissen"/>
</fieldset>
</form>
RESULTAAT: