Formulieren

Handleiding HTML
Inhoud   Index


In dit onderdeel komen aan de orde Introductie, Elementen, Verwerken informatie, Verzenden via mailto, Tekstvelden, Keuzerondjes, Aankruisvakjes, Knoppen, Bestanden verzenden, Keuzelijsten, Tekstvakken, 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.


Tekstveld:

Aankruisvakjes: keuze 1 keuze 2

Keuzerondjes: mee eens niet mee eens

Tekstvak:

Uitschuifkeuzelijst: Meervoudige keuzelijst:

Knoppen:


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:

BUTTON
FIELDSET
FORM
INPUT
LABEL
LEGEND
OPTGROUP
OPTION
SELECT
TEXTAREA


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 Netscape Navigator, Microsoft Internet Explorer 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 Common Gateway Interface (cgi) script, dat draait op de server van je provider. Vaak beschikt je provider over enkele standaard cgi-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 cgi-script direct naar een op te geven e-mailadres worden gestuurd. Bijvoorbeeld:

<FORM METHOD="post" ACTION="mailto:html@handleidinghtml.nl">
...
</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 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>

De mailto-URI wordt ondersteund door Microsoft Internet Explorer 4 en hoger, Netscape Navigator 2 en hoger en Opera 2.12 en hoger. De ondersteuning is echter niet altijd correct. Bij Internet Explorer 4 en hoger werkt de mailto-URI alleen goed als degene die het formulier invult, het bij de browser behorende e-mailprogramma (Outlook Express) standaard gebruikt. Bij de standalone versie van Netscape Navigator 4 (dus zonder dat het bijbehorende e-mailprogramma Messenger is geïnstalleerd) werkt de mailto-URI in het geheel niet. Door Opera wordt het ENCTYPE attribuut met de waarde "text/plain" niet ondersteund en is de inhoud van het bericht moeilijk leesbaar. Het toepassen van een mailto-URI wordt daarom afgeraden en als alternatief wordt 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:

Vul hier je naam in:

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:

Vul hier een wachtwoord van maximaal 8 tekens in:

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:

Verborgen control:

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:

Geef aan welke browser je gebruikt:

Netscape Navigator
Microsoft Internet Explorer
Opera
andere browser

De door jou gebruikte browser ondersteunt: wel inline frames geen inline frames


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:

Kruis aan welke vruchten je lekker vindt (meerdere antwoorden zijn mogelijk):

appels peren bananen

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

appels peren bananen

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:

Vul hier je naam in:

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 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 het NAME attribuut op te nemen met dezelfde waarde.

<FORM METHOD="post" ACTION="bestemming">
..
<INPUT TYPE="image" SRC="submit.gif" ALT="Klik om de informatie te verzenden" NAME="Klik om de informatie te 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:

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:

Geef aan welke browser je gebruikt:

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:

Geef aan welke vruchten je lekker vind (gebruik de Control toets om meerdere antwoorden te selecteren):

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="ander">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.

Voorbeeld OPTGROUP.

Hoewel het OPTGROUP element nog maar zeer beperkt wordt ondersteund, 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:

In het volgende vak kun je tekst invoeren:

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.


Controls groeperen

Onderdelen van een formulier kunnen gegroepeerd worden, door er met behulp van het FIELDSET element een kader om te plaatsen. Met het LEGEND element geef je een bijschrift op, welke 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.

Voorbeeld FIELDSET en LEGEND.

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.

Geef aan welke browser je gebruikt:





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.

Geef aan welke browser je gebruikt:




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.

Voorbeeld inline stijl voor TEXTAREA element.


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.

Voorbeeld inline stijl voor INPUT element.


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.

Voorbeeld inline stijl voor SELECT en OPTION element.


In een eerder gebruikt voorbeeld wordt nu het groeperen van controls benadrukt door het gebruik van inline stijlen.
Voor het FIELDSET element zijn 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.

Voorbeeld inline stijl voor FIELDSET en LEGEND element.


Overige voorbeelden

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


  Inhoud Handleiding HTML   Index   Inhoud Formulieren

Laatste wijziging 6 februari 2001
Copyright © 1995-2001 Hans de Jong