Formulieren stijlen

Formulieren stylen

In combinatie met tabellen of div’s kun je je formulier mooi opmaken. Dit doe je zodat je formulier in stijl met je website blijft maar dit doe je ook om het je gebruiker makkelijker te maken. Je kunt namelijk bij het opmaken van je formulier goed aangeven welke onderdelen bij elkaar horen en aparte onderdelen een beetje scheiden (bijvoorbeeld adresgegevens scheiden van een bestelling). Of je kunt goed aangeven of iemand een bepaald tekstvlak heeft aangeklikt (het vlak verandert bijvoorbeeld van kleur). Hoe dan ook zul je, zeker wanneer je jezelf serieus neemt als ontwerper, je formulier willen stijlen.

 

Formulieren met stijl

Formulieren met stijl

Over het algemeen zul je je formulier zelf niet stijlen. Veel doe je in je tabel of div-element waar het formulier in staat. Door dit slim aan te pakken is een formulier niet meer te herkennen als zo’n saai formulier maar blijft het toch gebruiksvriendelijk.

Formulieren met stijl

Formulieren met stijl

Bij formulieren zul je vooral bezig zijn met usability (gebruiksvriendelijkheid) en met de communicatie naar de klant toe. BIjvoorbeeld:

  • De input velden; zijn deze allemaal even lang of niet?
  • Hebben de input velden een rand of niet?
  • De buttons moeten goed duidelijk zijn.
  • Het gebruikte lettertype moet goed leesbaar zijn.

 

Input velden

Input velden kun je gewoon in pixels een breedte opgeven.

<style type=”text/css”>

input {
width: 200px;
}
</style>

Echter, alleen maar in je CSS een breedte en hoogte opgeven kan een vreemd resultaat opleveren:

Te brede input

Te brede input opgegeven.

Immers er zijn meerdere input velden dan alleen maar textfields. Buttons en checkboxen zullen dan dezelfde breedte en hoogte krijgen als gewone tekstvelden.

Specificeer per input het type (text of search):

<style type=”text/css”>
input[type=”text”] {
width: 200px;
}
</style>

Input met attribute selector

Input met attribute selector

Hoogte opgeven is wellicht wat vreemd; bij textfields gaat het meestal maar om 1 regel. Anders maak je een textarea.

Overigens kun je deze input velden ook weer afgeronde hoeken, border, kleuren etc geven!

Textarea’s

Textarea’s kunnen qua breedte in je CSS een width krijgen. Qua hoogte zul je in de tag zelf rows (rijen) moeten openemen:
In HTML:
<textarea rows=”5″></textarea>

In CSS:

textarea {
width : 200px;
}

Radiobuttons en checkboxen

Radiobuttons en checkboxen stylen is lastiger. Je zult dan echt wat geavanceerder CSS moeten typen (of kopiëren) of JavaScript moeten gebruiken.

Een aardige site kan zijn: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

Checkbox stylen

Checkbox stylen

Dit is alleen maar CSS. De buttons en boxen worden eerst onzichtbaar gemaakt. Vervolgens wordt met behulp van een achtergrond afbeelding een box getoond en de box met vinkje getoond.

Nb: je kunt natuurlijk zelf een andere afbeelding maken.

Focus op een invoerveld

Met behulp van de pseudoclass :focus (mèt de dubbele punt!) kun je formulierelementen een aparte vormgeving geven als er op geklikt wordt. Dit is zeer gebruiksvriendelijk om op te nemen omdat een gebruiker dan snel ziet op hij/zij inderdaad in een invoerveld staat met de cursor.

Focus op een invoerveld

Focus op een invoerveld

textarea:focus {
background: pink;
}

Neem altijd een focus op! Laat dit niet afhangen van de browser hoe dit er uit ziet maar beslis dit zelf in je stylesheet.

Post navigation