Handleiding HTML - Formulieren

HTML		Formulieren

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

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

Wanneer een vakje is aangekruist, verzendt de browser een combinatie van de waarden van de attributen NAME en VALUE. In het voorgaande voorbeeld is zo'n combinatie bijvoorbeeld:

fruit=appel

Als het VALUE attribuut niet is opgenomen, dan gebruikt de browser hiervoor de waarde "on". De volgende combinatie wordt in dat geval verzonden:

fruit=on

Een dergelijke weergave is uiteraard alleen begrijpelijk als slechts één vakje kan worden aangekruist. Wanneer voor meerdere vakjes hetzelfde resultaat wordt verzonden, blijft immers onduidelijk welke nu precies waren aangekruist. Het is daarom belangrijk het VALUE attribuut altijd te gebruiken als meerdere aankruisvakjes onder dezelfde naam gegroepeerd zijn.

Wanner je gebruik maakt van een mailto-formulier of de informatie op de server laat verwerken door een CGI-script, dan leveren de hiervoor gegeven voorbeelden met meerdere gegroepeerde aankruisvakjes het gewenste resultaat op. Maak je echter gebruik van een PHP-script, dan moet je er rekening mee houden dat zo'n script bij de gegeven voorbeelden alleen de informatie van het laatste aangekruiste vakje verwerkt. Om ervoor te zorgen dat het script ook de informatie van eerdere aangekruiste vakjes kan verwerken, moet je van de bij elkaar behorende aankruisvakjes een array maken. Dat doe je door de waarde van het NAME attribuut van het INPUT element te beëindigen met blokhaken. Het hiervoor gebruikte formulier ziet er dan als volgt uit:

<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>

Vervolg: Knoppen

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin