weballey logo
 
left forms - layout backnext right
homesearchsite mape-mail
intro
text
textarea
buttons
image
form
e-mail form
checkbox
radio
select
password
hidden
< layout >
cgi
tags
slot
 

    Besteed veel aandacht aan de layout van je formulier. Denk na over welke gegevens je beslist nodig hebt. Bedenk ook welke je niet echt nodig hebt. Vraag de gegevens die je nodig hebt, om je progamma goed te laten werken. Denk na over de volgorde van de invulveldden. Zet de belangrijkste bovenaan. Groepeer ze op een logische manier. Naam en adres bijelkaar bijvoorbeeld.
    Label de velden duidelijk en ondubbelzinnig. Maak duidelijk welke tekst bij welk vak hoort. Geef aan welke velden verplicht ingevuld moeten worden. Een vette rode asterisk (*) is vrij gebruikelijk, of gewoon een tekst "(verplicht)".

Preformatted
    Ben je zeker van je zaak, dan kun je beginnen met het formulier. Een populaire manier is de PRE tag. Ik gebruik deze zelf niet zoveel, maar het is best handig. Je hebt geen extra html code nodig, je kunt volstaan met puur de code voor het formulier zelf.

<PRE><FORM ACTION="mailto:johndoe@aol.com" METHOD="POST">
Naam         <INPUT NAME="naam">
e-mail adres <INPUT NAME="email">
Onderwerp    <INPUT NAME="onderwerp">
Boodschap
<TEXTAREA NAME="boodschap" COLS="40" ROWS="5">
<INPUT TYPE="submit" VALUE="Verzend">
<INPUT TYPE="reset" VALUE="Wis">
</FORM></PRE>
    Wat je te zien krijgt is het volgende. Je brwoser schakelt over naar een monospaced font, vaak ook wat kleiner. De tekst en velden worden uigelijnd, precies zoals je ze intikt.

Naam E-mail adres Onderwerp Boodschap

Tables
    Een andere manier om ingewikkelde formulieren vorm te geven, is het gebruik van html tables. Hiermee heb je meer vrijheid, en kun je meer bereiken. Ook ben je vrij in de keuze van je lettertype. Een nadeel is dat je meer code nodig hebt. Formulieren zijn gevoelig voor tikfouten, tabellen zo mogelijk nog erger. Ik geef zelf de voorkeur aan tabellen. Maar als je niet goed thuis bent in tabellen, kun je wellicht beter de PRE tag gebruiken.

bottom  
left Copyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right