Handleiding HTML - Formulieren

Formulieren
Handleiding HTML	Inhoud Index

In dit onderdeel komen aan de orde Introductie, Elementen, Verwerken informatie, Verzenden via mailto, Tekstvelden, Keuzerondjes, Aankruisvakjes, Knoppen, 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 document-inhoud (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:

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. Voorbeelden daarvan zijn FormMailer en Freedback, welke beiden een script hebben 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 CGI-script.

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

<FORM METHOD="post" ACTION="http://www.formmailer-scripts.net/cgi-bin/nlmailer.cgi"> ... </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 email-adres worden gestuurd. Bijvoorbeeld:

<FORM METHOD="post" ACTION="mailto:html@dsdelft.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@dsdelft.nl?SUBJECT=Vragenformulier Handleiding HTML"> ... </FORM>

De informatie uit het formulier wordt in het e-mailbericht op een weinig gebruiksvriendelijke wijze weergegeven: als één lange aaneengesloten regel tekst (waarbij elke spatie vervangen is door een + of door %20), 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@dsdelft.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 5 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 FormMailer of Freedback).

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"> Vul hier je naam in: <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"> Vul hier een wachtwoord van maximaal 8 tekens in: <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"> Verborgen control: <INPUT TYPE="hidden" NAME="recipient" VALUE="html@dsdelft.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"> Geef aan welke browser je gebruikt:<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> De door jou gebruikte browser ondersteunt: <INPUT TYPE="radio" NAME="frames" VALUE="f" CHECKED>wel frames <INPUT TYPE="radio" NAME="frames" VALUE="nf">geen 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"> Kruis aan welke vruchten je lekker vindt (meerdere antwoorden zijn mogelijk):<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 verzonden wordt. Het TYPE attribuut met de waarde "reset" definieert een knop, waarmee je de beginwaarden van het formulier kunt herstellen.

<FORM METHOD="post" ACTION="bestemming"> Vul hier je naam in:<BR> <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:

Met het VALUE attribuut bepaal je het opschrift van de knoppen. 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).

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 de informatie te verzenden. Waarschijnlijk is het beter voorlopig gewoon de standaard knoppen te blijven gebruiken.

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"> Geef aan welke browser je gebruikt:<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>

In browsers die het DISABLED attribuut ondersteunen (op dit moment alleen Internet Explorer 4) wordt de keuzelijst 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"> Geef aan welke vruchten je lekker vind (gebruik de Control toets om meerdere antwoorden te selecteren):<BR> <BR> <SELECT NAME="vruchten" MULTIPLE SIZE="4"> <OPTION>appels</OPTION> <OPTION>peren</OPTION> <OPTION>bananen</OPTION> <OPTION>sinaasappels</OPTION> <OPTION>kiwi's</OPTION> <OPTION>pruimen</OPTION> </SELECT> </FORM>

Dit wordt door de browser als volgt weergegeven:

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"> In het volgende vak kun je tekst invoeren:<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 en in Opera wordt de tekst in het tekstvak standaard afgebroken. In 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 Netscape specifieke attribuut WRAP.

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

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.

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 <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    <INPUT TYPE="radio" NAME="versie" VALUE="3">3    <INPUT TYPE="radio" NAME="versie" VALUE="4" CHECKED>4 </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"> Geef aan welke browser je gebruikt:<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 het tekstveld, het tekstvak en de knop voor verzenden.

<FORM METHOD="post" ACTION="bestemming"> Naam: <INPUT TYPE="text" SIZE="40" TABINDEX="1"><BR> <BR> Mening: <INPUT TYPE="radio" NAME="mening" VALUE="eens" CHECKED>mee eens <INPUT TYPE="radio" NAME="mening" VALUE="oneens">niet mee eens<BR> <BR> Eventuele opmerkingen:<BR> <TEXTAREA ROWS="3" COLS="40" NAME="opmerking" TABINDEX="2"></TEXTAREA><BR> <BR> <INPUT TYPE="reset" VALUE="Beginwaarden"> <INPUT TYPE="submit" VALUE="Verzenden" TABINDEX="3"> </FORM>

Druk in een browser die het TABINDEX attribuut ondersteunt op de tab-toets tot je bij de knop voor verzenden bent aangeland. Druk je daarna opnieuw op de tab-toets, dan begint de browser met het doorlopen van de rest van de tabreeks en spring je naar de eerste hyperlink aan het begin van dit document.

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"> Geef aan welke browser je gebruikt:<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>

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>

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    <INPUT TYPE="radio" NAME="versie" VALUE="3">3    <INPUT TYPE="radio" NAME="versie" VALUE="4" CHECKED>4</DIV> </FIELDSET> </FORM>

Overige voorbeelden

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

Inhoud Handleiding HTML Index Inhoud Formulieren