Gigadesign, XHTML-CSS website maken

Stylen van input enzo.

Formulieren invullen, wie heeft het nog nooit gedaan.
De ene al wat meer als den anderen.
Het enigste wat ze bijna allemaal gemeen hebben is het uitzicht, daarom heb ik eens een beetje ge-experimenteerd.
Als je het toepast kom niet klagen als je opeens veel mails krijgt via je website, want het formulier gaat schreeuwen om ingevuld te worden.

Invulformulieren zijn nuttig (soms) en waarom ophouden met het gebruik van Css als je ook deze elementen kunt aanpassen, zodat je invulformulier als het ware shreeuwt om ingevuld te worden. Standaard ziet het er toch niet uit.
Dus waarom geen kleuren toevoegen, andere lettertypes, hover effecten (niet bij IE) ?

De ongebakken form

Invulformulier structuur.
En zoals het hoort gaan we ook even de daartoe voorziene elementen gebruiken

<fieldset>
<legend>Mijn formulier.</legend>
<form action="verwerking.php">
<label for="naam">Naam</label>
<input type="text" id="naam" /><br />
<label for="e-mail">E-mail</label>
<input type="text" id="e-mail" /><br />
<input type="submit" value="Versturen" />
</form>
</fieldset>

Dus als je een standaard formulier wenst te zien, ik hou je niet tegen om het grijze smakeloze voorbeeld te bekijken, zonder opmaak.

Html klaarmaken voor gebruik.

Positionering van de velden

Zoals iedereen gebruikte ik ook tabellen om formulieren te positioneren (het was toch zooo gemakkelijk), deze tijd is voorbij, tabellen dienen voor data en niet voor opmaak van elementen.

Met Css is dit evengoed te doen, en beter en mooier, dus gaan we eerst eens onze structuur voorzien van class.

<fieldset>
<legend>Mijn formulier.</legend>
<form action="verwerking.php">
<label for="naam">Naam</label>
<input type="text" id="naam" class=”invulveld” /><br />
<label for=”e-mail”>E-mail</label>
<input type=”text” id=”e-mail” class=”invulveld” /><br />
<input type=”submit” value=”Versturen” class=”knop” />
</form>
</fieldset>

De velden input type tekst voor naam en email zijn voorzien van dezelfde class "invulveld", en de input type knop met class "knop". Dus nu kunnen we de CSS aanspreken hiervoor.

Positioneren met Css

Voor een perfecte uitlijning gebruiken we volgende regels:

label {
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both;
}

.knop {
margin-left: 6em;
clear: both;
}

Je vraagt je wellicht af waarom er een em waarde gebruikt wordt voor de width te bepalen ?, ahwel als een gebruiker zijn tekst instellingen aanpast naar een groter lettertype, dan verandert het invoerveld mee naargelang de ingestelde lettergrootte.

Voorbeeld tot zover kan je hier bekijken, nog steeds zeer grijs en standaard.

Kleuren toevoegen

Nu een beetje kleur inbrengen en het saaie is ervan af:

fieldset {
border: #26a solid 1px;
width: 20em
}

.knop {
margin-left: 6em;
margin-bottom: 1em;
clear: both;
color: #000;
background: #9CF;
border: 2px #CCF outset;
}

Het ziet er nu zo uit.

Veel plezier met het experimenteren, de door mij gebruikte kleuren schreeuwen natuurlijk, maar het is ook maar als voorbeeld bedoeld.