Formulieren

In dit onderdeel komen aan de orde Introductie, Elementen, Verwerken informatie, Verzenden via mailto, Tekstvelden, Keuzerondjes, Aankruisvakjes, Knoppen, Bestanden verzenden, Keuzelijsten, Tekstvakken, Een formulier opmaken, Controls groeperen, Controls activeren en Het gebruik van stijlen. Daarnaast worden enkele meer uitgebreide voorbeelden gegeven.

Introductie

Formulieren (forms) worden gebruikt om de bezoeker van een site de mogelijkheid te bieden informatie in te voeren en te verzenden. Het kan daarbij gaan om bijvoorbeeld het geven van een reactie, het aanmelden als abonnee, het invullen van een enquête, het beantwoorden van vragen en het plaatsen van een bestelling.

De belangrijkste elementen bij het maken van formulieren zijn FORM, INPUT, SELECT, OPTION en TEXTAREA.

Het FORM element definieert het begin en einde van een formulier. Met de attributen METHOD en ACTION wordt bepaald op welke wijze de informatie uit het formulier verzonden moet worden en waarheen.

Een formulier bevat naast normale documentinhoud (bijvoorbeeld paragrafen, lijsten en koppen) een aantal onderdelen, welke controls worden genoemd.

Het INPUT element wordt onder andere gebruikt voor het maken van de volgende controls:

• tekstvelden, waarin de gebruiker op één regel tekst kan invoeren (gewone tekst, of een wachtwoord)
• verborgen informatie, welke voor de gebruiker niet zichtbaar is, maar wel met de overige informatie uit het formulier naar de server gestuurd wordt)
• aankruisvakjes (checkboxen), waarvan de gebruiker er één of meer kan selecteren
• keuzerondjes (radio buttons), waarbij de gebruiker één keuze moet maken uit meerdere mogelijkheden
• bestandsselectie, waarbij de gebruiker bestanden kan selecteren welke met het formulier meegestuurd moeten worden
• knoppen voor verzenden (submit) en terug naar de beginwaarden van het formulier (reset)

De elementen SELECT en OPTION worden gebruikt voor het maken van de volgende controls:

• uitschuifkeuzelijst: de gebruiker kiest uit een uitklapbaar menu één of meer mogelijkheden
• meervoudige keuzelijst: de gebruiker kiest één of meer mogelijkheden uit een lijst, waarin meerdere opties zichtbaar zijn

Het TEXTAREA element wordt gebruikt om het volgende control te maken:

• tekstvak, waarin de gebruiker over meerdere regels tekst kan invoeren

In het volgende "formulier" zijn een aantal controls te zien.

Aan de meeste van de hiervoor genoemde elementen kunnen de attributen NAME en VALUE toegevoegd worden. Met het NAME attribuut wordt aan een control een naam gegeven, zodat het bij de verwerking van het formulier op de server onderscheiden kan worden van andere controls. Het VALUE attribuut legt vast welke waarde naar de server gestuurd moet worden, als een bepaalde keuze gemaakt wordt. Daarnaast kan het in sommige gevallen gebruikt worden om een beginwaarde te definiëren (bij tekstvelden).

Nieuwe mogelijkheden bieden de in HTML 4.0 opgenomen elementen FIELDSET, LEGEND, OPTGROUP, LABEL en BUTTON. Deze elementen hebben vooral betrekking op de weergave en toegankelijkheid van formulieren.
Het FIELDSET element kan gebruikt worden om een aantal (bijvoorbeeld thematisch gerelateerde) controls van een formulier te groeperen door er een kader om te plaatsen. Met het LEGEND element kan bij dat kader een bijschrift geplaatst worden.
Met het OPTGROUP element kunnen keuzemogelijkheden in een keuzelijst gegroepeerd worden. Dit moet voorkomen dat de gebruiker bij een lange lijst in de vele mogelijkheden verdwaalt.
Met het LABEL element kan informatie aan een control verbonden worden (bijvoorbeeld een bijschrift), welke het de gebruiker makkelijker moet maken dat control te selecteren.
Het BUTTON element kan gebruikt worden om een knop te maken met meer mogelijkheden voor de opmaak dan de knoppen, welke gemaakt worden met het INPUT element.
Tot de nieuwe mogelijkheden behoren ook de attributen TABINDEX en ACCESSKEY, welke aan meerdere elementen toegevoegd kunnen worden. Met het TABINDEX attribuut kan de volgorde bepaald worden, waarmee de verschillende controls van een formulier geactiveerd kunnen worden als de gebruiker de tab-toets op het toetsenbord indrukt. Het ACCESSKEY attribuut kan gebruikt worden om een sneltoets aan een element toe te wijzen en daarmee de gebruiker direct vanaf het toetsenbord toegang te geven tot het control, dat door het element in het formulier is geplaatst.
De genoemde elementen en attributen worden nog slechts beperkt ondersteund.

Elementen

Voor het maken van formulieren zijn de volgende elementen beschikbaar:

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Microsoft Internet Explorer, Mozilla, Netscape Navigator en Opera.

Verwerken informatie

Als een bezoeker een formulier heeft ingevuld, zal het de bedoeling zijn dat de informatie op de juiste plek terecht komt en verwerkt wordt. Die verwerking gebeurt over het algemeen door middel van een daarvoor bestemd script, dat draait op de server van je provider. Vaak beschikt je provider over enkele standaard scripts, waarvoor je de gebruiksrechten kunt krijgen. Bijvoorbeeld voor het automatisch als e-mail door sturen van de in het formulier ingevoerde informatie. Minder vaak zal een provider je toestaan ook eigen scripts te draaien. Wanneer je van formulieren gebruik wilt maken, is het daarom verstandig bij je provider te informeren naar de mogelijkheden.

Als alternatief voor je eigen provider kun je ook terecht bij enkele sites, die gratis standaard scripts aanbieden voor algemeen gebruik. Een voorbeeld daarvan is het form-to-mail script van Freedback.com, dat de informatie uit het formulier op een overzichtelijke manier per e-mail naar je toezendt. Informatie over andere mogelijkheden voor het gratis verwerken van formulieren vind je bij The CGI Resource Index.

Met de attributen METHOD en ACTION van het FORM geef je aan op welke wijze en waarheen de informatie uit het formulier verzonden moet worden.

Het METHOD attribuut kent twee waarden: "get" en "post". Welke waarde moet worden opgenomen, hangt af van het gebruikte script of programma op de server.

De waarde van het ACTION attribuut is een URI. Als gebruik gemaakt wordt van een script of programma op de server, dan wordt de bestemming door middel van een http-URI vastgelegd. Bijvoorbeeld:

<FORM METHOD="post"
ACTION="http://cgi18.Freedback.com/mail.pl">
...
</FORM>

Verzenden via mailto

Met behulp van een mailto-URI kan de informatie uit het formulier zonder tussenkomst van een script op de server direct naar een op te geven e-mailadres worden gestuurd. Bijvoorbeeld:

<FORM METHOD="post" ACTION="mailto:html@handleidinghtml.nl">
...
</FORM>

De informatie uit het formulier wordt in het e-mailbericht op een weinig gebruiksvriendelijke wijze weergegeven: als één lange aaneengesloten regel tekst (waarin bepaalde karakters vervangen zijn door code, bijvoorbeeld de spatie door %20; zie ook het overzicht bij Karakters in URI's) of in de vorm van een attachment. Je kunt dat voorkomen door het ENCTYPE attribuut met de waarde "text/plain" aan het FORM element toe te voegen.

<FORM METHOD="post" ACTION="mailto:html@handleidinghtml.nl" ENCTYPE="text/plain">
...
</FORM>

Net als bij mailto-hyperlinks worden door sommige browsers ook parameters voor de mailto-URI ondersteund, bijvoorbeeld om het onderwerp (subject) van het e-mailbericht vast te leggen:

<FORM METHOD="post"
ACTION="mailto:html@handleidinghtml.nl?SUBJECT=Reactie">
...
</FORM>

De mailto-URI wordt ondersteund door alle versies Microsoft Internet Explorer, Netscape Navigator en Opera. De ondersteuning is echter niet altijd compleet en leidt in de praktijk tot veel problemen:

• Bij vrijwel alle browsers werkt de mailto-URI alleen goed als degene die het formulier invult, het bij de browser behorende e-mailprogramma gebruikt. Bij de standalone versie van Netscape Navigator 4 werkt de mailto-URI in het geheel niet.
• In Netscape Navigator 6 wordt niets verstuurd, maar een nieuw bericht in het e-mailprogramma geopend. De te verzenden informatie uit het formulier staat echter niet in de body van het bericht en kan dus ook niet verzonden worden.
• Door geen enkele versie van Opera wordt het ENCTYPE attribuut met de waarde "text/plain" ondersteund. De inhoud van het bericht is daardoor moeilijk leesbaar.
• De extra parameters voor SUBJECT, CC en BCC worden door geen enkele versie van Opera ondersteund. Doordat ze aan het e-mailadres worden geplakt en dat daarmee geen legaal adres meer is, kan de informatie uit het formulier niet verzonden worden.
• Meerdere e-mailadressen kunnen niet gebruikt worden. Het standaard scheidingsteken de komma wordt ondersteund door Netscape Navigator en Opera. Door Microsoft Internet Explorer wordt bij de komma als scheidingsteken (zonder dat er een foutmelding wordt gegeven) helemaal niets verstuurd. Als de puntkomma als scheidingsteken wordt gebruikt gaat het goed in Microsoft Internet Explorer, maar geven Netscape Navigator en Opera een foutmelding.

Gezien alle problemen wordt het toepassen van een mailto-URI afgeraden en als alternatief het gebruik van een form-to-mail script geadviseerd (van de eigen provider, of van bijvoorbeeld Freedback.com).

Tekstvelden

Een tekstveld wordt gebruikt om de bezoeker een beperkte hoeveelheid tekst op één regel te laten invoeren. Je maakt het met het INPUT element. In het volgende voorbeeld zijn daaraan de attributen TYPE, NAME, SIZE en MAXLENGTH toegevoegd. Door het TYPE attribuut de waarde "text" te geven, bepaal je dat het om een tekstveld gaat. Het SIZE attribuut definieert de breedte van het tekstveld en het MAXLENGTH attribuut bepaalt hoeveel karakters de gebruiker mag invoeren.

<FORM METHOD="post" ACTION="bestemming">
<I>Vul hier je naam in:</I>
<INPUT TYPE="text" NAME="naam" SIZE="20" MAXLENGTH="30">
</FORM>

Dit wordt door de browser als volgt weergegeven:

In dit voorbeeld mag er meer tekst ingevoerd worden dan past in het tekstveld. De tekst scrollt aan het eind automatisch door. Het is voor de gebruiker overigens wel zo overzichtelijk als de maximale lengte gelijk is aan de breedte van het tekstveld.

Met de waarde "password" voor het TYPE attribuut wordt de invoer met asterisken (*) weergegeven.

<FORM METHOD="post" ACTION="bestemming">
<I>Vul hier een wachtwoord van maximaal 8 tekens in:</I>
<INPUT TYPE="password" NAME="wachtwoord" SIZE="8" MAXLENGTH="8">
</FORM>

Dit wordt door de browser als volgt weergegeven:

Door het TYPE attribuut de waarde "hidden" te geven, kan onzichtbaar voor de bezoeker bepaalde informatie naar de server worden gestuurd.

<FORM METHOD="post" ACTION="bestemming">
<I>Verborgen control:</I>
<INPUT TYPE="hidden" NAME="recipient" VALUE="html@handleidinghtml.nl">
</FORM>

Dit wordt door de browser als volgt weergegeven:

Hoewel door de browser niets wordt weergegeven, kan de invoer wel bekeken worden in de bron van het document.

Keuzerondjes

Keuzerondjes (radiobuttons) worden gebruikt wanneer de bezoeker uit meerdere mogelijkheden één keuze moet maken. Je maakt ze met het INPUT element. In het volgende voorbeeld zijn daaraan de attributen TYPE, NAME, VALUE en in één geval CHECKED toegevoegd. Het TYPE attribuut met de waarde "radio" bepaalt dat het om keuzerondjes gaat. Met NAME attribuut gebruik je om aan te geven welke keuzerondjes bij elkaar horen. Het VALUE attribuut definieert welke waarde naar de server gestuurd moet worden als een keuzerondje geselecteerd is. Het CHECKED attribuut zorgt er voor dat een keuzerondje bij openen van het formulier geselecteerd is.

<FORM METHOD="post" ACTION="bestemming">
<I>Geef aan welke browser je gebruikt:</I><BR>
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="NN">Netscape Navigator<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="MSIE" CHECKED>Microsoft Internet Explorer<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="OP">Opera <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="anders">andere browser<BR>
<BR>
<I>De door jou gebruikte browser ondersteunt:</I>
<INPUT TYPE="radio" NAME="iframes" VALUE="if" CHECKED>wel inline frames
<INPUT TYPE="radio" NAME="iframes" VALUE="inf">geen inline frames
</FORM>

Dit wordt door de browser als volgt weergegeven:

Aankruisvakjes

Aankruisvakjes (checkboxes) worden gebruikt wanneer de bezoeker meerdere mogelijkheden tegelijk kan kiezen. Je maakt ze door het TYPE attribuut met de waarde "checkbox" aan het INPUT element toe te voegen.

<FORM METHOD="post" ACTION="bestemming">
<I>Kruis aan welke vruchten je lekker vindt (meerdere antwoorden zijn mogelijk):</I><BR>
<BR>
<INPUT TYPE="checkbox" NAME="fruit" VALUE="appel">appels
<INPUT TYPE="checkbox" NAME="fruit" VALUE="peer">peren
<INPUT TYPE="checkbox" NAME="fruit" VALUE="banaan">bananen
</FORM>

Dit wordt door de browser als volgt weergegeven:

Door aan het INPUT element het CHECKED attribuut toe te voegen, wordt een vakje al vooraf aangekruist. De gebruiker kan dit weer ongedaan maken.

<INPUT TYPE="checkbox" NAME="fruit" VALUE="appel" CHECKED>appels

Door de browser wordt de combinatie van de waarden van de attributen NAME en VALUE naar de server gestuurd indien een vakje is aangekruist.

Knoppen

De meest gebruikte knoppen zijn die, welke je maakt met het INPUT element. Door het TYPE attribuut met de waarde "submit" aan het INPUT element toe te voegen, maak je een knop die er voor zorgt dat de informatie van het formulier wordt verzonden. Het TYPE attribuut met de waarde "reset" definieert een knop, waarmee je de beginwaarden van het formulier kunt herstellen. Met het VALUE attribuut bepaal je het opschrift van de knoppen.

<FORM METHOD="post" ACTION="bestemming">
<I>Vul hier je naam in:</I>
<INPUT TYPE="text" NAME="naam" SIZE="20" MAXLENGTH="30"><BR>
<BR>
<INPUT TYPE="reset" VALUE="Beginwaarden">
<INPUT TYPE="submit" VALUE="Verzenden">
</FORM>

Dit wordt door de browser als volgt weergegeven:

Druk je op Beginwaarden, dan worden alle selecties ongedaan gemaakt en wordt alle reeds ingevoerde tekst op het formulier verwijderd. Druk je op Verzenden, dan worden de gegevens van het formulier verzonden naar de bestemming gedefinieerd via het ACTION attribuut van het FORM element (in dit voorbeeld werkt dat niet, omdat geen echte URL is opgenomen).

Een knop voor verzenden zal in de meeste formulieren nodig zijn. Of een reset-knop nodig is, zal per situatie bekeken moeten worden. Bij kleine formulieren met een enkel tekstveld is er geen enkele noodzaak voor een reset-knop, terwijl het bij uitgebreide formulieren maar de vraag is, of de gebruiker er behoefte aan heeft alle ingevoerde informatie in één keer te kunnen wissen. In ieder geval zal de gebruiker het niet op prijs stellen als alles gewist wordt, doordat hij/zij per ongeluk op de verkeerde knop drukt.

Knoppen worden ook vaak gebruikt bij scripts. Klikken op de knop heeft dan niet als resultaat dat informatie naar de server gestuurd wordt, maar dat het script een bepaalde gebeurtenis veroorzaakt.

In plaats van een knop kan ook een afbeelding gebruikt worden om de informatie uit het formulier te verzenden. Je voegt daarvoor aan het INPUT element het TYPE attribuut met de waarde "image" toe en bovendien de attributen SRC en ALT. Het SRC attribuut bepaalt welke afbeelding moet worden opgenomen, het ALT attribuut definieert een alternatieve tekst voor als de browser de afbeelding niet kan of mag worden weergegeven. Omdat niet elke browser met het ALT attribuut overweg kan, is het goed ook de attributen VALUE en NAME op te nemen. Voor het VALUE attribuut kun je dezelfde waarde als van het ALT attribuut gebruiken. Als waarde voor het NAME attribuut kun je er het beste een kiezen, die uitsluitend letters, cijfers en verbindingsstreepjes bevat.

<FORM METHOD="post" ACTION="bestemming">
..
<INPUT TYPE="image" SRC="submit.gif" ALT="Klik om de informatie te verzenden" VALUE="Klik om de informatie te verzenden" NAME="Verzenden">
</FORM>

In dit voorbeeld geeft de afbeelding de suggestie van een knop. Het mag echter ook een gewone "platte" afbeelding zijn.

Met het BUTTON element heb je meer mogelijkheden om te bepalen hoe een knop er uitziet.

<FORM METHOD="post" ACTION="bestemming">
..
<BUTTON TYPE="reset"><IMG SRC="neg.gif" ..> Beginwaarden</BUTTON>
<BUTTON TYPE="submit"><IMG SRC="pos.gif" ..> Verzenden</BUTTON>
</FORM>

In een browser die het BUTTON element ondersteunt, zie je zowel de afbeelding als de tekst welke de inhoud van het element vormen:

Beginwaarden Verzenden

Houd er rekening mee dat browsers die het BUTTON element niet ondersteunen alleen de inhoud weergeven. De gebruiker heeft dan dus geen knop meer om op te drukken en kan de informatie dus niet verzenden. Waarschijnlijk is het beter voorlopig gewoon de standaard knoppen te blijven gebruiken.

Bestanden verzenden

In een formulier kun je de gebruiker de mogelijkheid bieden, om gelijk met de rest van de informatie één of meer bestanden naar de server te sturen. Cruciaal daarbij is dat je de beschikking hebt over een script of programma op de server, dat de informatie uit het formulier kan afhandelen en weet wat er met de verzonden bestanden moet gebeuren: bijvoorbeeld opslaan op de server, per e-mail doorsturen, of er bepaalde gegevens uithalen en die op de een of andere manier verwerken. Heb je niet de beschikking over zo'n script of programma, dan heeft het geen zin de mogelijkheid tot het verzenden van bestanden in je formulier op te nemen.

Als je de mogelijkheid wilt bieden bestanden mee te sturen, moet je aan het FORM element in ieder geval het METHOD attribuut met de waarde "post" en het ENCTYPE attribuut met de waarde "multipart/form-data" toevoegen. Met het ACTION attribuut leg je daarnaast vast, welk script of programma op de server de te verzenden informatie moet afhandelen.
Het TYPE attribuut van het INPUT element met de waarde "file" zorgt ervoor dat er een tekstveld en een knop in het formulier te zien zijn. Drukken op de knop opent een venster waarin een bestand geselecteerd kan worden, waarna in het tekstveld de naam (inclusief het volledige pad) van het geselecteerde bestand wordt weergegeven. De grootte van het tekstveld bepaal je met het SIZE attribuut. Het is verstandig deze niet te klein te kiezen, omdat anders een groot deel van het pad en de bestandsnaam niet te lezen zijn. Het NAME attribuut gebruik je om het control een naam te geven. Deze naam heeft geen verband met de naam van het bestand, maar dient slechts als informatie voor het script of programma op de server.

<FORM METHOD="post" ACTION="bestemming" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="upload">
</FORM>

De browser geeft dit als volgt weer:

De mogelijkheid om bestanden te uploaden wordt ondersteund door Microsoft Internet Explorer 4.0 en hoger, Netscape Navigator 2.0 en hoger en door Opera 3.5 en hoger. Een browser die de waarde "file" voor het TYPE attribuut van het INPUT element niet ondersteunt, zal de standaardwaarde van het TYPE attribuut ("text") gebruiken en dus alleen een tekstveld weergegeven.

Bij Microsoft Internet Explorer en Netscape Navigator heeft de knop het opschrift "Browse ...", bij Opera het onduidelijker "...". Het opschrift, de afmetingen en de verdere vormgeving van de knop kunnen, ook met style sheets, niet beïnvloed worden. Opera ondersteunt het SIZE attribuut niet en geeft slechts een klein tekstveld weer.

In Opera kunnen meerdere bestanden geselecteerd worden, in Microsoft Internet Explorer en Netscape Navigator slechts één bestand. Indien het nodig is de gebruiker in alle gevallen de gelegenheid te bieden meerdere bestanden te uploaden, is het daarom aan te bevelen in het formulier meerdere keren het INPUT element met het attribuut TYPE="file" op te nemen.

Hoewel er weinig situaties te bedenken zijn waarin het echt nuttig is, kan het in een enkel geval gewenst zijn een beginwaarde voor de bestandsnaam en het pad van het te verzenden bestand vast te leggen. Het VALUE attribuut van het INPUT element kan daarvoor worden gebruikt. Om te voorkomen dat de gebruiker ongemerkt en onbedoeld een bestand verzendt, wordt deze mogelijkheid door de meeste browsers echter niet ondersteund. Opera 3.5 en hoger doet dit wel en heeft het veiligheidsprobleem opgelost, door voor verzenden een bevestiging van de gebruiker te vragen.

Keuzelijsten

Een uitschuifkeuzelijst neemt in het document slechts beperkte ruimte in, maar kan toch een groot aantal keuzemogelijkheden bevatten. Je maakt een keuzelijst met de elementen SELECT en OPTION. Het SELECT element geeft aan dat het om een keuzelijst gaat, het OPTION attribuut definieert een keuze.

<FORM METHOD="post" ACTION="bestemming">
<I>Geef aan welke browser je gebruikt:</I><BR>
<BR>
<SELECT NAME="browser">
<OPTION>Netscape Navigator</OPTION>
<OPTION>Microsoft Internet Explorer</OPTION>
<OPTION>Opera</OPTION>
<OPTION>andere browser</OPTION>
</SELECT>
</FORM>

Dit wordt door de browser als volgt weergegeven:

Door aan het OPTION element het attribuut VALUE toe te voegen, kan bepaald worden welke waarde naar de server gestuurd moet worden.
Door aan het OPTION element het attribuut SELECTED toe te voegen, wordt bepaald welke mogelijkheid door de browser als standaard weergegeven moet worden. Is het SELECTED attribuut niet gebruikt, dan wordt de eerste mogelijkheid weergegeven (zoals in het voorbeeld hiervoor).

<OPTION VALUE="MSIE" SELECTED>Microsoft Internet Explorer</OPTION>

Als het DISABLED attribuut wordt toegevoegd aan het SELECT element, kan de gebruiker geen keuze selecteren.

<SELECT NAME="browser" DISABLED>

Het DISABLED attribuut kan ook toegevoegd worden aan een OPTION element. De betreffende keuze kan dan niet geselecteerd worden.

<OPTION VALUE="NN" DISABLED>Netscape Navigator</OPTION>

In browsers die het DISABLED attribuut ondersteunen (Netscape Navigator 6) wordt de keuze meestal in grijs weergegeven.

Een meervoudige keuzelijst brengt meer keuzemogelijkheden in beeld. Met het SIZE attribuut van het SELECT element wordt vastgelegd hoeveel mogelijkheden er in de keuzelijst zichtbaar zijn. Het MULTIPLE attribuut maakt het mogelijk meerdere keuzen tegelijk te selecteren.
Door aan het OPTION element het attribuut VALUE toe te voegen, kan bepaald worden welke waarde naar de server gestuurd moet worden.
Door aan het OPTION element het attribuut SELECTED toe te voegen, kan bepaald worden welke mogelijkheden al voorgeselecteerd moeten zijn (zoals hiervoor bananen).

<FORM METHOD="post" ACTION="bestemming">
<I>Geef aan welke vruchten je lekker vind (gebruik de
Control toets om meerdere antwoorden te selecteren):</I><BR>
<BR>
<SELECT NAME="vruchten" MULTIPLE SIZE="4">
<OPTION VALUE="ap">appels</OPTION>
<OPTION VALUE="pe">peren</OPTION>
<OPTION VALUE="ba" SELECTED>bananen</OPTION>
<OPTION VALUE="si">sinaasappels</OPTION>
<OPTION VALUE="ki">kiwi's</OPTION>
<OPTION VALUE="pr">pruimen</OPTION>
</SELECT>
</FORM>

Dit wordt door de browser als volgt weergegeven:

Ook bij de meervoudige keuzelijst kun je met het DISABLED attribuut bepaalde keuzen uitsluiten.

<OPTION VALUE="pr" DISABLED>pruimen</OPTION>

In browsers die het DISABLED attribuut ondersteunen (Netscape Navigator 6) wordt de keuze meestal in grijs weergegeven.

Met behulp van het OPTGROUP element kunnen verschillende bij elkaar behorende keuzen worden gegroepeerd. Het gemeenschappelijke kenmerk van een groep keuzemogelijkheden wordt vastgelegd met het LABEL attribuut.

<FORM METHOD="post" ACTION="bestemming">
<SELECT NAME="browser">
<OPTION VALUE="xx">Kies een browser</OPTION>
<OPTGROUP LABEL="Netscape Navigator">
<OPTION VALUE="nn3">Netscape Navigator 3</OPTION>
...
</OPTGROUP>
<OPTGROUP LABEL="Microsoft Internet Explorer">
<OPTION VALUE="msie3">Microsoft Internet Explorer 3</OPTION>
...
</OPTGROUP>
<OPTGROUP LABEL="Opera">
<OPTION VALUE="op3">Opera 3</OPTION>
...
</OPTGROUP>
<OPTION VALUE="anders">Andere browser</OPTION>
</SELECT>
</FORM>

Van de weergave van dit voorbeeld door Netscape Navigator 6 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het OPTGROUP element ondersteunt.

Hoewel het OPTGROUP element nog maar zeer beperkt wordt ondersteund (alleen door Netscape Navigator 6 en Microsoft Internet Explorer 6), kan het zonder problemen worden toegepast. Browsers die het element niet kennen, geven de keuzelijst op de gebruikelijke wijze weer.

Als de keuzemogelijkheden zijn gegroepeerd zoals in het voorbeeld hiervoor, dan ligt het voor de hand ze zelf ook op andere wijze weer te geven. Dus bijvoorbeeld niet voluit "Netscape Navigator 3", maar alleen "3". Dat kan met behulp van het LABEL attribuut van het OPTION element.

<OPTGROUP LABEL="Netscape Navigator">
<OPTION LABEL="3" VALUE="nn3">Netscape Navigator 3</OPTION>
<OPTION LABEL="4" VALUE="nn4">Netscape Navigator 4</OPTION>
<OPTION LABEL="6" VALUE="nn6">Netscape Navigator 6</OPTION>
</OPTGROUP>

Op dit moment wordt deze mogelijkheid echter door geen van de belangrijkste browsers ondersteund.

Naast de hier beschreven toepassing in een formulier, worden keuzelijsten ook vaak in combinatie met JavaScript gebruikt om de bezoeker te laten kiezen uit een lijst met hyperlinks. Hoewel JavaScript in principe buiten het bereik van deze handleiding valt, zijn in een apart document enkele voorbeelden opgenomen.

Tekstvakken

Een tekstvak kan gebruikt worden om de bezoeker een in principe onbeperkte hoeveelheid tekst te laten invoeren. Je maakt een tekstvak met het TEXTAREA element. De attributen ROWS en COLS bepalen de hoogte (het aantal rijen) en breedte (het aantal karakters) van het tekstvak.

<FORM METHOD="post" ACTION="bestemming">
<I>In het volgende vak kun je tekst invoeren:</I><BR>
<BR>
<TEXTAREA NAME="tekstvak" ROWS="4" COLS="50"></TEXTAREA>
</FORM>

Dit wordt door de browser als volgt weergegeven:

Tussen beide delen van het TEXTAREA element kan ook een standaard tekst geplaatst worden. Dat wordt door de browser zo weergegeven:

In Microsoft Internet Explorer vanaf versie 3.0, in Opera en in Netscape Navigator 6 wordt de tekst in het tekstvak standaard aan de rechterzijde van het tekstvak afgebroken. In lagere versies van Netscape Navigator gebeurt dat niet en loopt de tekst door buiten de grens van het vak. Je kunt dat voorkomen door gebruik te maken van het WRAP attribuut.

<TEXTAREA NAME="tekstvak" ROWS="4" COLS="50" WRAP="soft"> </TEXTAREA>

Het WRAP attribuut maakt geen deel uit van HTML 4.

Door het READONLY attribuut toe te voegen aan het TEXTAREA element kan vastgelegd worden dat de vooraf bepaalde inhoud van het tekstvak niet gewijzigd mag worden door degene die het formulier invult.

<TEXTAREA NAME="tekstvak" ROWS="4" COLS="50" READONLY> </TEXTAREA>

Het READONLY attribuut wordt ondersteund door Microsoft Internet Explorer 4 en hoger en door Netscape Navigator 6.

Met het DISABLED attribuut wordt het tekstvak wel weergegeven, maar is het voor het overige geblokkeerd: het tekstvak kan geen focus krijgen (klikken op het tekstvak heeft geen effect en de vooraf bepaalde inhoud van het tekstvak kan dus niet gewijzigd worden), het tekstvak doet niet mee in de tab-volgorde en de inhoud wordt niet met het formulier verstuurd. Vaak wordt de inhoud van een geblokkeerd tekstvak in grijs weergegeven.

<TEXTAREA NAME="tekstvak" ROWS="4" COLS="50" DISABLED> </TEXTAREA>

Het DISABLED attribuut wordt ondersteund door Microsoft Internet Explorer 4 en hoger en door Netscape Navigator 6.

Een formulier opmaken

De controls in een formulier worden weergegeven als inline elementen. Dat wil zeggen dat ze gewoon op een regel naast of tussen tekst of andere inline inhoud (bijvoorbeeld afbeeldingen) kunnen staan en dat de precieze plek bepaald wordt door die andere inhoud. Het geheel kan daardoor een nogal rommelige indruk geven. Dat is bijvoorbeeld te zien in het volgende formulier: de twee tekstvelden zijn weliswaar even lang, maar de voorafgaande tekst zorgt ervoor dat ze niet netjes onder elkaar staan.

<FORM METHOD="post" ACTION="bestemming">
Je naam: <INPUT NAME="name" SIZE="30"><BR>
Je e-mailadres: <INPUT NAME="from" SIZE="30">
</FORM>

De weergave is als volgt:

Om wat meer ordening aan te brengen in het formulier kun je gebruik maken van een tabel. Door de tekst en de controls in aparte cellen te plaatsen, worden de tekstvelden netjes onder elkaar uitgelijnd.

<FORM METHOD="post" ACTION="bestemming">
<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="0">
<TR>
<TD>Je naam:</TD>
<TD><INPUT NAME="name" SIZE="30"><BR></TD>
</TR>
<TR>
<TD>Je e-mailadres:</TD>
<TD><INPUT NAME="from" SIZE="30"><BR></TD>
</TR>
</TABLE>
</FORM>

In de browser ziet dat er als volgt uit:

Als je gebruik maakt van een tabel voor de layout van een formulier, dan moet je de activering en de beëindiging van het FORM element buiten de tabel te plaatsen. De activering en beëindiging van de overige elementen in het formulier (zoals SELECT en TEXTAREA) daarentegen moeten zich juist binnen één cel van de tabel bevinden.

De breedte van een keuzelijst wordt bepaald door de keuzemogelijkheid met de langste omschrijving. Als je meerdere keuzelijsten gebruikt, zal de breedte daarvan dus vrijwel zeker verschillen. Door het toevoegen van een extra keuzemogelijkheid aan alle keuzelijsten met een lange omschrijving kun je ze op eenvoudige wijze even lang maken.

<FORM METHOD="post" ACTION="bestemming">
<SELECT NAME="browser">
<OPTION VALUE="" SELECTED>------ Maak hier je keuze ------</OPTION>
<OPTION VALUE="NN">Netscape Navigator</OPTION>
<OPTION VALUE="MSIE">Microsoft Internet Explorer</OPTION>
<OPTION VALUE="OP">Opera</OPTION>
<OPTION VALUE="anders">andere browser</OPTION>
</SELECT>
</FORM>

Aan de volgende twee keuzelijsten is de extra keuzemogelijkheid niet toegevoegd. Ze zijn daardoor niet even lang:

Met de extra keuzemogelijkheid worden dezelfde keuzelijsten wel even lang:

Als alternatief kun je de breedte van keuzelijsten ook beïnvloeden door gebruik te maken van stijlen. Die mogelijkheid wordt echter door oudere browsers (waaronder Netscape Navigator 4) niet ondersteund.

Controls groeperen

Een nieuwe mogelijkheid waarmee je de layout van een formulier kunt bepalen, is het groeperen van controls. Je doet dat door met het FIELDSET element een kader te plaatsen om bij elkaar horende controls. Met het LEGEND element kun je daarbij een bijschrift opgeven, dat in het kader geplaatst wordt. In het volgende voorbeeld is dit te zien.

<FORM METHOD="post" ACTION="bestemming">
<FIELDSET>
<LEGEND><B>Browser</B></LEGEND>
<BR>
Geef aan welke browser je gebruikt:<BR>
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="NN">Netscape Navigator
...
<BR>
versie:
<INPUT TYPE="radio" NAME="versie" VALUE="2">2
...
</FIELDSET>
</FORM>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser de gebruikte elementen en attributen ondersteunt.

Hoewel de elementen FIELDSET en LEGEND slechts beperkt ondersteund worden, kun je ze zonder problemen gebruiken. Wel moet er op gelet worden dat browsers, die het LEGEND element niet kennen, het bijschrift als gewone tekst weergeven. Het kan daarom handig zijn, de inhoud van het LEGEND element binnen het B element te plaatsen, zodat het in alle gevallen benadrukt wordt. Daarnaast is het aan te raden de aan het FIELDSET element voorafgaande elementen op blokniveau (bijvoorbeeld P) te sluiten (met </P>) en daarmee te voorkomen, dat het bijschrift op dezelfde regel geplaatst wordt als voorafgaande inhoud.

Controls activeren

Het LABEL element kun je gebruiken om een label aan een control te verbinden. Klik je op het label, dan wordt het control geactiveerd. In het volgende voorbeeld is gebruik gemaakt van een expliciete verbinding met behulp van het FOR attribuut voor het LABEL element. De waarde van het FOR attribuut moet hetzelfde zijn als de waarde van het ID attribuut van het control.

<FORM METHOD="post" ACTION="bestemming">
<I>Geef aan welke browser je gebruikt:</I><BR>
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="NN" ID="nn">
<LABEL FOR="nn">Netscape Navigator</LABEL><BR>
...
</FORM>

In een browser die het LABEL element ondersteunt, kun je hierna ook op het label klikken om het keuzerondje te activeren.

Op een formulier kun je snel naar een volgend veld springen door gebruik te maken van de tab-toets. Normaal worden de verschillende controls afgewerkt in de volgorde, waarin ze in het document staan (probeer dit eens uit in het formulier aan het begin van dit document). Met behulp van het TABINDEX attribuut kan deze volgorde beïnvloed worden. In het volgende voorbeeld is het TABINDEX attribuut gebruikt voor verschillende controls.

<FORM METHOD="post" ACTION="bestemming">
Naam:
<INPUT TYPE="text" SIZE="20" TABINDEX="1"><BR>
<BR>
Mening:
<INPUT TYPE="radio" NAME="mening" VALUE="eens" CHECKED TABINDEX="3">eens
<INPUT TYPE="radio" NAME="mening" VALUE="oneens" TABINDEX="5">oneens<BR>
<BR>
Opmerkingen:<BR>
<TEXTAREA ROWS="3" COLS="30" NAME="opmerking" TABINDEX="7"></TEXTAREA><BR>
<BR>
Browser:
<SELECT NAME="browser" TABINDEX="2">
<OPTION VALUE="NN">Netscape Navigator</OPTION>
...
</SELECT><BR>
<BUTTON TYPE="submit" TABINDEX="6"><IMG SRC="pos.gif" ...>Verzenden</BUTTON>
<INPUT TYPE="reset" VALUE="Beginwaarden" TABINDEX="4">
</FORM>

Bekijk in een document in een nieuw venster of de browser het TABINDEX attribuut correct ondersteunt.

Het ACCESSKEY attribuut kan gebruikt worden om een sneltoets te definiëren, waarmee een control snel vanaf het toetsenbord geactiveerd kan worden. In het eerder gebruikte voorbeeld voor het LABEL element is het ACCESSKEY attribuut aan het LABEL element toegevoegd. Omdat de waarde voor het ID attribuut slechts één keer mag voorkomen in een document, zijn de waarden voor het FOR en ID attribuut wat aangepast. De eerste letter van elk label is gebruikt als sneltoets en overeenkomstig het gebruik bij gewone sneltoetsen onderstreept. Dat is gedaan met behulp van Cascading Style Sheets, zodat in ieder geval een deel van de browsers die het ACCESSKEY attribuut niet kennen, de onderstreping weglaten.

<FORM METHOD="post" ACTION="bestemming">
<I>Geef aan welke browser je gebruikt:</I><BR>
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="NN" ID="Bnn" ACCESSKEY="n">
<LABEL FOR="Bnn"><SPAN STYLE="text-decoration: underline">N</SPAN>etscape Navigator</LABEL><BR>
...
</FORM>

Druk in een browser die het ACCESSKEY attribuut ondersteunt op de sneltoets om de browser te selecteren: in Windows de alt-toets plus de onderstreepte letter.

Hoewel het LABEL element en de attributen TABINDEX en ACCESSKEY slechts beperkt ondersteund worden, kun je ze zonder problemen nu al gebruiken. Browsers die ze niet kennen slaan ze eenvoudig over.

Het gebruik van stijlen

Voor alle elementen welke gebruikt worden bij het maken van formulieren, kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. In het volgende voorbeeld is dat gedaan voor het TEXTAREA element. Met behulp van het STYLE attribuut is een inline stijl gedefinieerd voor het lettertype (standaard is dat een lettertype met een vaste lettergrootte) en de kleur van de tekst in het tekstvak.

<FORM METHOD="post" ACTION="bestemming">
<TEXTAREA ROWS="6" COLS="30" STYLE="font-family: sans-serif; color: blue;">Aan het TEXTAREA ... blauw.</TEXTAREA>
</FORM>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

In het volgende voorbeeld zijn met behulp van het STYLE attribuut inline stijlen gedefinieerd voor enkele controls gemaakt met het INPUT element.

<FORM METHOD="post" ACTION="bestemming">
<INPUT TYPE="text" SIZE="36" VALUE="Rode tekst op een gele achtergrond" STYLE="color: red; background: yellow; width: 245px; font-family: serif; font-size: 12pt;"><BR>
<BR>
<INPUT TYPE="reset" VALUE="Beginwaarden" STYLE="color: #FFFFFF; background: blue; font-weight: bold; width: 120px; height: 50px;">
<INPUT TYPE="submit" VALUE="Verzenden" STYLE="color: #FFFFFF; background: blue; font-weight: bold; width: 120px; height: 50px;">
</FORM>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

In het volgende voorbeeld zijn met behulp van het STYLE attribuut inline stijlen gedefinieerd voor de elementen SELECT en OPTION.

<FORM METHOD="post" ACTION="bestemming">
<SELECT NAME="abc" STYLE="background: lime; font-size: 16pt; font-family: sans-serif; vertical-align: top;">
<OPTION>Dit is keuze 1</OPTION>
<OPTION>Dit is keuze 2</OPTION>
<OPTION>Dit is keuze 3</OPTION>
</SELECT><BR>
<BR>
<SELECT NAME="def" MULTIPLE SIZE="3" STYLE="background: yellow; font-size: 16pt; font-family: serif;">
<OPTION>Dit is keuze 1</OPTION>
<OPTION STYLE="background: fuchsia;">Dit is keuze 2</OPTION>
<OPTION>Dit is keuze 3</OPTION>
<OPTION>Dit is keuze 4</OPTION>
<OPTION>Dit is keuze 5</OPTION>
</SELECT>
</FORM>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

Ook de breedte van controls als tekstvelden, keuzelijsten en tekstvakken kun je bepalen met behulp van een stijl. Door gebruik te maken van deze mogelijkheid kun je de verschillende controls in een formulier bijvoorbeeld even lang maken en ervoor zorgen dat de weergave in de verschillende browsers meer uniform wordt. Het gebruik van stijlen voor het vastleggen van de breedte wordt ondersteund door Microsoft Internet Explorer 4 en hoger, Netscape Navigator 6 en Opera 5 en hoger. Als voorbeeld is het STYLE attribuut aan het SELECT element toegevoegd.

<FORM METHOD="post" ACTION="bestemming">
<SELECT NAME="browser" STYLE="width: 250px;">
<OPTION VALUE="NN">Netscape Navigator</OPTION>
<OPTION VALUE="MSIE">Microsoft Internet Explorer</OPTION>
<OPTION VALUE="OP">Opera</OPTION>
<OPTION VALUE="anders">andere browser</OPTION>
</SELECT>
</FORM>

De eerste keuzelijst is de standaard weergave, in de tweede is de breedte met behulp van een stijl gedefinieerd:

Het groeperen van controls (zie het eerder gebruikte voorbeeld) kun je met behulp van stijlen extra benadrukken.
Voor het FIELDSET element zijn hierna onder andere de stijleigenschappen width en border opgenomen, om de breedte van het kader en de dikte en de kleur van de rand te bepalen. Voor het LEGEND element is de kleur en het gewicht van de tekst bepaald met de stijleigenschappen color en font-weight. Voor het DIV element is tenslotte de padding eigenschap opgenomen, om wat afstand te creëren tussen de controls en het kader.

<FORM METHOD="post" ACTION="bestemming">
<FIELDSET STYLE="width: 240px; border: solid thin red; font-family: sans-serif;>
<LEGEND STYLE="color: red; font-weight: bold;">Browser</LEGEND>
<BR>
<DIV STYLE="padding: 1em;">Geef aan welke browser je gebruikt:<BR>
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="NN">Netscape Navigator
<INPUT TYPE="radio" NAME="browser" VALUE="MSIE" CHECKED>Microsoft Internet Explorer
<INPUT TYPE="radio" NAME="browser" VALUE="OP">Opera
<INPUT TYPE="radio" NAME="browser" VALUE="anders">andere browser
<BR>
versie:
<INPUT TYPE="radio" NAME="versie" VALUE="2">2 &nbsp;&nbsp;
<INPUT TYPE="radio" NAME="versie" VALUE="3">3 &nbsp;&nbsp;
<INPUT TYPE="radio" NAME="versie" VALUE="4" CHECKED>4</DIV>
</FIELDSET>
</FORM>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

Overige voorbeelden

Bekijk ook eens de voorbeelden voor een formulier voor zoeken op Internet en een vragenformulier.

  Inhoud Handleiding HTML   Trefwoordenregister   Inhoud Formulieren

Laatste wijziging 23 juli 2002
Copyright © 1995-2002 Hans de Jong