Alle hoofdstukken...

Inhoudsopgave
Inleiding
Een eenvoudig HTML document
Afbeeldingen
Lijsten
Links
Tabellen
Frames
Formulieren
Cascading stylesheets
JavaScript
PHP programmeren
Server side includes
CGI & Perl
Speciale tekens
Kleurvoorbeelden
Meer informatie
Software
Recente toevoegingen
Alfabetische index

In dit hoofdstuk...

Kernbegrippen
Een "submit" knop
Een "reset" knop
Een tekstveld
Wachtwoordvelden
Tekstgebied
Voorkeuzeknoppen
Vinkjes
Pop-up lijsten
Kiezen uit lijsten
Verborgen invoer
Het formulier verwerken

Language choice...

You have chosen to use Dutch as your preferred language.

Click here to switch to English.

Formulieren

Met formulieren geef je lezers de gelegenheid te reageren op je site. Je kunt bijvoorbeeld een bestelformulier maken. In combinatie met PHP of Perl scripts kun je een site interactief maken. Je kunt bijvoorbeeld een spelletje of een rekenmachine maken.

Kernbegrippen

Dit is hoe alle formulieren er in principe uit zien:

<FORM METHOD="post" ACTION="formtester.php" >

Teksvelden, menu's, enz.

<INPUT TYPE="reset" VALUE="Formulier wissen">
<INPUT TYPE="submit" VALUE="Formulier insturen">

</FORM>

Verderop in dit hoofdstuk vind je meer uitleg over de verschillende tekstvelden, knoppen en menu's die je in een formulier kunt gebruiken en de submit en reset knoppen.

De METHOD en ACTION attributen in het FORM element vertellen de browser wat er met het formulier moet gebeuren. De eenvoudigste manier is <FORM METHOD="post" ACTION="mailto:name@domain"> waarmee de invoer van de gebruiker verstuurd wordt aan het door jou gekozen e-mail adres. Je kunt je formulier ook bewerken met CGI scripts. Dat is ingewikkelder maar biedt ook veel meer mogelijkheden. Er zijn aparte hoofdstukken over Perl en PHP.

Binnen een formulier kun je paragrafen, stijlen en koppen gebruiken voor de opmaak. Je kunt ook afbeeldingen gebruiken binnen een formulier. Hoe het formulier er precies uit ziet verschilt per browser en per platform. Bijvoorbeeld, voor een Mac gebruiker zien keuzeknoppen er uit als standaard Mac keuzeknoppen. Je kunt hier niets aan doen hoewel je afbeeldingen zou kunnen gebruiken als knoppen zodat ze er op alle platforms gelijk uitzien.

Alle voorbeelden in dit hoofdstuk gebruiken het formtester.php script. Het is een heel simpel script wat alle invoer in een formulier toont in een nette tabel. Het ziet er zo uit:

<HTML><HEAD><TITLE>Form output tester</TITLE></HEAD><BODY>

<TABLE BORDER="1" CELLPADDING="3">
<TR><TD><B>Name / Naam</B></TD><TD><B>Value / Waarde</B></TD></TR>

<?php
  foreach ( $_POST as $i => $j ) {
    print "<TR><TD>$i</TD><TD>$j</TD></TR>";
  }
?>

</TABLE>
</BODY></HTML>

Door een attribuut te gebruiken bij het FORM element, wordt de tabel getoond in een nieuw venster. In het hoofdstuk over PHP vind je een uitgebreidere uitleg over het gebruik van PHP voor verschillende taken. Het formtester.php heeft meerdere veiligheidsmaatregelen ingebouwd maar die worden hier niet getoond om het niet te ingewikkeld te maken.

Een "submit" knop

De submit knopt vertelt de browser dat je klaar bent met het formulier. Als de gebruiker op de submit knop klikt, doet de browser wat er in het ACTION attribuut van het FORM element staat. In de meeste gevallen betekent dit dat de server een script uitvoert.

Bij een submit knop heeft het TYPE attribuut de waarde "submit". Met het VALUE attribuut stel je de tekst in die in de knop zelf verschijnt:

De submit knop zelf geeft geen resultaat aan formtester.php. De knop dient alleen om de browser te laten weten het formulier in te sturen.

Het is ook mogelijk een afbeelding als een submit knop te gebruiken.

In het bovenstaand voorbeeld zorgt klikken van het Apple logo voor het versturen van het formulier. Zoals je in de resultaten van formtester.php kunt zien, geeft de browser ook de X en Y coördinaten door van de plek waar de gebruiker op het logo klikte. Als je het formulier instuurt met de enter toets, krijgen X en Y de waarde 0.

Een "reset" knop

Tot nu toe heb je alleen de submit knop gezien. Met een reset knop kan de gebruiker het formulier terugzetten naar de waarden de jij in het begin instelde:

Een reset knop heeft een TYPE attribuut "reset". Daarmee weet de browser wat het doel van de knop is. Het VALUE attribuut stelt de tekst in die op de knop zelf verschijnt.

Het klikken op de reset knopt maakt alle tekstvelden weer leeg. Als de tekstvelden een beginwaarde hadden, krijgen ze die weer terug. Dat geldt ook voor voorkeuzeknoppen en dergelijke.

Een tekstveld

Een tekstveld is de meest eenvoudige vorm van het INPUT element. Je kunt de grootte van het tekstveld instellen, de maximale lengte en een beginwaarde:

<FORM METHOD="post" ACTION="formtester.php" >
<DIV>
Uw e-mail adres: <INPUT NAME="email" TYPE="text" SIZE="30" MAXLENGTH="70" VALUE="naam@domein"><BR>
<INPUT TYPE="submit" VALUE="Formulier insturen">
</DIV>
</FORM>

Het NAME attribuut is essentieel voor het gebruik van de invoer van het formulier. Wil je het formulier straks kunnen verwerken, dan moet elk onderdeel een unieke naam hebben. Het TYPE attribuut geeft aan dat het hier om een tekstveld gaat. Het SIZE attribuut geeft de breedte van het tekstveld in karakters. Hoe breed dit precies is, hang af van de browser en het gebruikte lettertype. Het MAXLENGTH attribuut definieert hoeveel karakters de gebruiker in kan voeren. Zonder MAXLENGTH kan de lezer eindeloos veel tekst in het veld typen en in de meeste gevallen wil je dat niet. Met het VALUE attribuut kun je een beginwaarde voor het tekstveld instellen. Als de gebruiker die waarde niet verandert is dat de invoer die je ontvangt. Het is niet verplicht een beginwaarde in te stellen.

Met JavaScript kun je de beginwaarde van het veld laten verdwijnen zodra de gebruiker het begint te bewerken.

In zo'n tekstveld kun je alle bekende handelingen zoals knippen, kopiëren en plakken doen.

Wachtwoordvelden

Een wachtwoordveld is bijna identiek aan een tekstveld met het verschil dat de invoer niet van het scherm gelezen kan worden:

<FORM METHOD="post" ACTION="formtester.php" >
<DIV>
Password: <INPUT NAME="passw" TYPE="password"><BR>
<INPUT TYPE="submit" VALUE="Formulier versturen">
</DIV>
</FORM>

Als je een wachtwoord typt, zie je dat het als stipjes op het scherm verschijnt. Dat is om te voorkomen dat iemand over de schouder van de gebruiker meekijkt en het wachtwoord ziet. Als het formulier ingestuurd is verschijnt uiteraard het het getypte wachtwoord en niet de stipjes.

Tekstgebied

Een TEXTAREA element is geschikt voor het invoeren van langere teksten:

<FORM METHOD="post" ACTION="formtester.php" >
<DIV>
Your comments:<BR>
<TEXTAREA NAME="comments" COLS="50" ROWS="3">Alle suggesties zijn welkom!</TEXTAREA><BR>
<INPUT TYPE="submit" VALUE="Formulier versturen">
</DIV>
</FORM>

De COLS en ROWS attributen stellen het aantal kolommen en rijen tekst vast. Dat gaat alleen over de grootte van het TEXTAREA op het scherm, en niet de maximale grootte van de invoer. Het NAME attribuut heeft hetzelfde doel als altijd. De beginwaarde van de tekst staat tussen <TEXTAREA> en </TEXTAREA>. Je hoeft geen beginwaarde te geven. Het TEXTAREA kent geen MAXSIZE attribuut.

Voorkeuzeknoppen

Voorkeuzeknoppen (radio buttons) worden gebruikt om de lezer meerdere opties te tonen waarvan er één gekozen kan worden:

<FORM METHOD="post" ACTION="formtester.php" >
<DIV>
Deze gids is
<INPUT NAME="guide" TYPE="radio" VALUE="good">Goed
<INPUT NAME="guide" TYPE="radio" VALUE="average" CHECKED>Gemiddeld
<INPUT NAME="guide" TYPE="radio" VALUE="bad">Slecht<BR>
<INPUT TYPE="submit" VALUE="Formulier versturen">
</DIV>
</FORM>

Zoals je kunt zien zijn er drie INPUT elementen die elk dezelfde NAME en TYPE attributen hebben. Het TYPE="radio" en de identieke namen vertellen de browser dat dit een set van drie keuzeknoppen is die bij elkaar horen. De gebruiker kan daarom maar één van deze knoppen selecteren. Het CHECKED attribuut maakt de middelste knop de beginkeuze die geselecteerd is als de lezer deze pagina opent. Het VALUE attribuut geeft aan wat een knop teruggeeft als die gekozen werd.

Vinkjes

Vinkjes lijken op voorkeuzeknoppen. Het verschil is dat de lezer uit één set vinkjes er meerdere kan selecteren:

<FORM METHOD="post" ACTION="formtester.php" >
<DIV>
De goede dingen zijn:<BR>
<INPUT NAME="like1" TYPE="checkbox" VALUE="graphics">De afbeeldingen<BR>
<INPUT NAME="like2" TYPE="checkbox" VALUE="layout" CHECKED>De opmaak<BR>
<INPUT NAME="like3" TYPE="checkbox" VALUE="contents">De inhoud<BR>
<INPUT NAME="like4" TYPE="checkbox" CHECKED>Weinig fouten<BR>
<INPUT NAME="like5" TYPE="checkbox" VALUE="colours">De kleuren<BR>
<INPUT TYPE="submit" VALUE="Formulier versturen">
</DIV>
</FORM>

Er is één INPUT element voor elk vinkje. Elk vinkje kan individueel aan- of uitgezet worden. Elk vinkje heeft een unieke naam. Het TYPE="checkbox" attribuut geeft aan dat dit een vinkje is. Het VALUE attribuut geeft aan wat je terugkrijgt van het formulier als een vinkje aanstaat. Het vinkje "like4" heeft geen VALUE attribuut. Als je die aanvinkt en dan het formulier instuurt zul je zien dat "like4" de waarde "on" krijgt. Het CHECKED attribuut zorgt er voor dat een vinkje aanstaat als de pagina laadt.

Pop-up lijsten

Formulieren kunnen pop-up menu's hebben waarmee de gebruiker een optie uit een lijst kan kiezen:

<FORM METHOD="post" ACTION="formtester.php" >
<DIV>
Kwam je per
<SELECT NAME="kwammet">
<OPTION>Vliegtuig
<OPTION SELECTED>Trein
<OPTION>Auto
</SELECT><BR>
<INPUT TYPE="submit" VALUE="Formulier insturen"> </DIV>
</FORM>

De <SELECT> en </SELECT> tags omsluiten het hele menu. Elke keuze begint met een OPTIE element. Het SELECTED attribuut bepaalt welke optie al geselecteerd is, "trein" in dit voorbeeld. Het gebruik daarvan is niet verplicht. Je kunt maar één SELECTED attribuut gebruiken.

Een pop-up menu kun je op dezelfde manier gebruiken als keuzeknoppen. Over het algemeen is het gebruik van keuzeknoppen handiger als je een paar opties hebt. Als er veel opties zijn, is een pup-op lijst handiger.

Kiezen uit lijsten

Een variatie op het ppop-up menu is een lijst waar de gebruker meerdere dingen uit kan kiezen. Dit doe je door een SELECT element een MULTIPLE attribuut te geven:

<FORM METHOD="post" ACTION="formtester.php" >
<DIV>
Welke talen spreek je?<BR>
<SELECT NAME="talen" SIZE="5" MULTIPLE>
<OPTION>Nederlands
<OPTION SELECTED>Engels
<OPTION>Frans
<OPTION>Duits
<OPTION>Russisch
<OPTION SELECTED>Spaans
<OPTION>Zweeds
<OPTION>Welsh
</SELECT><BR>
<INPUT TYPE="submit" VALUE="Formulier insturen"> </DIV>
</FORM>

Het SIZE attribuut geeft aan hoeveel regels er in de lijst getoond worden. Om een normaal bruikbare lijst te hebben moet je hier een waarde van minimaal 4 of 5 gebruiken. Het MULTIPLE attribuut betekent dat de gebruiker meerdere opties kan selecteren. Het SELECTED attribuut betekent dat een optie geselecteerd is als beginwaarde. In dit geval kun je uiteraard wel meerdere SELECTED attributen gebruiken.

Verborgen invoer

Een "hidden" INPUT kun je gebruiken om informatie in een formulier bij te sluiten die de gebruiker niet hoeft te zien:

<FORM METHOD="post" ACTION="formtester.php" >
<DIV>
Your e-mail address:
<INPUT NAME="voorbeeld" TYPE="hidden" VALUE="zomaarwat">
<INPUT NAME="email" TYPE="text" SIZE="30" MAXLENGTH="70" VALUE="name@domain"><BR>
<INPUT TYPE="submit" VALUE="Formulier insturen">
</DIV>
</FORM>

In het eigenlijke formulier kun de "hidden" input niet zien. Als je het formulier instuurt kun je zien dat formtester.php de input wel ontvangt. Dit kan ook handig zijn om informatie door te geven aan het script dat het formulier verwerkt. Wees je er wel van bewust dat de "hidden" invoer niet echt verborgen is. Het kan zichtbaar worden gemaakt door "toon bron" te kiezen in elke browser.

Het formulier verwerken

De eenvoudigste manier om een formulier te verwerken is per e-mail. Je gebruikt een ACTION="mailto:iemand@ergens.com" attribuut. Echter, deze methode heeft drie nadelen. Ten eerste moet je dan je e-mail adres opnemen in je webpagina en dat is een uitnodiging voor spammers. Ten tweede kun je dan de invoer niet controleren voor die wordt verstuurd. Ten derde behandelen verschillende browsers deze e-mail op verschillende manieren en krijg je dus onvoorspelbare resultaten.

Perl was heel lang de meest gebruikte taal om formulieren te verwerken. In het hoofdstuk over Perl vind je een voorbeeld van het afhandelen van formulieren met deze scripttaal.

Op dit moment is PHP het meest gebruikt. Het formtester script wat ik op deze pagina's gebruik is in die taal geschreven. Er is een apart hoofdstuk over PHP om je op weg te helpen met die scripttaal.

Tenslotte kun je met Javascript op allerlei manieren invoer in formulieren controleren en bewerken. Voor meer informatie, zie het hoofdstuk Javascript.

Reacties welkom...

Ik hoor graag je mening over deze gids, informatie die je graag toegevoegd zou willen zien of eventuele fouten die je hebt ontdekt. Klik hier.

Open standaarden...

Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.