Klik hier voor de inhoudsopgave

HTML op het net - Printversie - Formulieren
Originele URL: http://html.op-het.net/tekst/formulieren.html

Inleiding

Formulieren worden gebruikt om bepaalde informatie van de gebruiker te vragen en die te versturen. Deze informatie kan dan bijvoorbeeld via e-mail verstuurd worden naar de maker van de pagina of degene voor wie de gegevens zijn bestemd. Ook kan je formulieren gebruiken om parameters door te geven aan een CGI-script.

<FORM>

Hiermee begin je een formulier. Hier staat waar de ingevoerde data heengestuurd moet worden, dus tussen de <FORM> en de </FORM> komt het eigenlijke formulier.

Attribuut	Resultaat
ACTION=	hier wordt aangegeven wat er met de ingevulde gegevens moet gebeuren als de gebruiker op de verzenden-knop klikt: "mailto:mail@host.com" zendt de gegevens naar een e-mail adres. Met deze methode wordt de data verzonden in een klein bestandje dat met het e-mailtje meegestuurd wordt. Deze methode werkt alleen als de bezoeker een browser met ingebouwd e-mail programma gebruikt en de instellingen van dat e-mail programma goed zijn. "/cgi-bin/form2mail" zendt de gegevens naar een CGI-script. Zo'n script kan bijvoorbeeld de gegevens netjes in een e-mailtje zetten in plaats van in een bestandje. Bijna elke Internet-aanbieder heeft wel zo'n CGI-script, al kan je ook altijd een script van een ander aanbieder gebruiken. Let er wel op dat er altijd extra parameters meegestuurd moeten worden. Dit verschilt per CGI-script
METHOD=	de methode van versturen van de data: post of get

<INPUT>

Definieer de invoervakken. De volgende attributen kunnen meegegeven worden:

Attribuut	Resultaat
TYPE=	text invoervak voor één regel tekst password invoervak voor één regel tekst, maar je kan niet zien wat er ingevoerd wordt radio keuzerondje, meerdere radio's met dezelfde naam worden een array. Binnen een array kan er maar één optie geselecteerd worden checkbox aankruisvakje image aanklikbaar plaatje: coördinaten van de plaats waar geklikt is worden geregistreerd. Alle gegevens worden direct verstuurd als er op het plaatje geklikt wordt! hidden verborgen vak: VALUE stelt geregistreerde waarde in. Dit is handig voor bijvoorbeeld het adres van dit formulier. Je weet dan altijd waar dit ingevuld is file bestand: hiermee kan je iemand een bestand mee laten sturen. Met VALUE kan je bepalen welk bestand als standaard ingevuld wordt. Je moet echter wel in de <FORM>-tag de attributen ENCTYPE="multipart/form-data" en METHOD=post toevoegen. Dit element werkt in Netscape 2.0 en hoger, IE 3.02 met speciale upload-patch en IE 4 en hoger. submit Verzend-knop: VALUE bepaalt wat er op de knop staat. Als er op deze knop gedrukt wordt, worden de gegevens verstuurd reset Reset-knop: VALUE bepaalt wat er op de knop staat. Als er op deze knop gedrukt wordt, worden alle gegevens in het formulier gewist
NAME="naam"	naam van het invoervak
SIZE=n	breedte van het invoervak in tekens, er kan wel langere tekst ingevoerd worden
MAXLENGTH=n	maximale lengte van de ingevoerde tekst in tekens
VALUE="waarde"	geeft aan welke waarde geregistreerd moet worden bij een radio of checkbox als deze aangekruist is. Bij een text of password een standaardwaarde die vantevoren ingevuld wordt
CHECKED	radio of checkbox standaard aangekruist
SRC="plaatje.gif"	de locatie van het bestand voor een image

Voorbeelden

*	Voer hier uw naam in: <INPUT TYPE=text NAME="naam">
	Voer hier uw naam in:
*	Voer uw wachtwoord in: <INPUT TYPE=password SIZE=20 NAME="wachtwoord">
	Voer uw wachtwoord in:
*	Wat is uw geslacht: <INPUT TYPE=radio VALUE="man" NAME="geslacht"> Man <INPUT TYPE=radio VALUE="vrouw" NAME="geslacht"> Vrouw
	Wat is uw geslacht: Man Vrouw
*	Kruis dit vakje aan als u e-mail wilt ontvangen <INPUT TYPE=checkbox NAME="e-mail" VALUE="ja" CHECKED>
	Kruis dit vakje aan als u e-mail wilt ontvangen
*	<FORM ENCTYPE="multipart/form-data" METHOD=post ACTION="/cgi-bin/upload">Bestand dat u mee wilt sturen: <INPUT TYPE=file NAME="bestand" VALUE="bestand.txt"></FORM>
	Bestand dat u mee wilt sturen:
*	<INPUT TYPE=reset VALUE="Reset"><INPUT TYPE=submit VALUE="Verzenden">

<TEXTAREA>tekst</TEXTAREA>

Definieert een invoervak voor meerdere regels. tekst is de tekst die standaard ingevuld wordt.

Attribuut	Resultaat
NAME="naam"	naam van het invoervak
COLS=n	het aantal kolommen dat het invoervak breed moet zijn (standaard 40)
ROWS=n	het aantal regels dat het invoervak hoog moet zijn (standaard 4)

Voorbeeld

*	Typ hier uw lof over deze pagina's: <TEXTAREA NAME="lof" ROWS=4 COLS=40>Heel goed!</TEXTAREA>
	Typ hier uw lof over deze pagina's: Heel goed!

<SELECT>

Definieer een keuzelijst. Een keuzelijst is een lijst met opties waaruit gekozen kan worden.

Attribuut	Resultaat
NAME="naam"	de naam van de keuzelijst
SIZE=n	het aantal opties in de lijst
MULTIPLE	als dit toegevoegd wordt, wordt het mogelijk meerdere opties te selecteren

<OPTION>optietekst

Keuzelijst vullen met opties. optietekst is de tekst die in de lijst komt te staan.

Attribuut	Resultaat
VALUE="waarde"	de waarde die doorgegeven moet worden als deze optie geselecteerd is
SELECTED	als dit toegevoegd wordt, is deze optie standaard geselecteerd

</SELECT>

Einde van de keuzelijst.

Voorbeeld

*	Kies hier uw locatie: <SELECT NAME="locatie"> <OPTION VALUE="Nederland">Nederland <OPTION VALUE="Europa">Ergens anders in Europa <OPTION VALUE="Wereld">Ergens anders in de wereld </SELECT>
	Kies hier uw locatie: Nederland Ergens anders in Europa Ergens anders in de wereld

</FORM>

Einde van het formulier.
JavaScript tip

Er is veel meer met formulieren te doen dan simpel informatie invoeren en versturen als er een beetje JavaScript gebruikt wordt. Het is mogelijk ingevulde waarden te controleren voordat de informatie verstuurd wordt, of je kan een formulier gebruiken voor websitenavigatie.
Events (gebeurtenissen)

Aan elk formulier-onderdeel kan je met behulp van een 'event' (gebeurtenis) een stukje JavaScript koppelen:
<FORM>

	Event	Betekenis
	onSubmit	als het formulier verzonden wordt
	onReset	als er op de reset-knop gedrukt wordt

<BUTTON>, <INPUT>, <SELECT> en <TEXTAREA>

	Event	Betekenis
	onClick	als het element aangeklikt wordt
	onFocus	als het element de focus krijgt (JS 1.1)
	onBlur	als het element de focus verliest (JS 1.1)
	onChange	als de waarde van het element verandert
	onSelect	als de ingevulde tekst in een element geselecteerd wordt

Als er (JS 1.1) achter een event staat, betekent dit dat het event pas vanaf JavaScript 1.1 ondersteund wordt (dus vanaf Netscape Navigator 3.0 en Microsoft Internet Explorer 4.0).

Ingevulde waarden controleren

In JavaScript kan je de waarde van elk element opvragen op de volgende manier:
stel dat we het volgende formulier hebben:

<FORM NAME="Formulier1"> <INPUT TYPE=TEXT NAME="Tekstveld"> </FORM>

Dan staat de ingevulde waarde in de variabele document.Formulier1.Tekstveld.value.

Voorbeeld 1

In het volgende voorbeeld wordt er gecontroleerd of erwel een geldig e-mail adres is ingevuld:

- in de <HEAD>-sectie van het document:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function TestEmail() {   // controleren of het invoervak niet leeg is   // en of er wel een @ in staat:   if (document.EmailForm.Email.value == "" || document.EmailForm.Email.value.indexOf ('@', 0) == -1) {     // zo niet, laat een melding zien:     alert ("\r Vul een geldig e-mail adres in!");     // cursor in het invoervak zetten:     document.EmailForm.Email.focus();     // voorkomen dat het formulier verzonden wordt:     return false;   } else {     // als alles goed is toestemming geven het formulier te verzenden:     return true;   } } // --> </SCRIPT>

De groene regels zijn commentaar en mogen weggelaten worden.

- in het document zelf:

<FORM ACTION="...." NAME="EmailForm" onSubmit="return TestEmail();"> <INPUT TYPE=TEXT NAME="Email"> <INPUT TYPE=SUBMIT VALUE="Opsturen"> </FORM>

Voorbeeld 2

Je kan een selectielijst (drop-down list) ook gebruiken als een soort van pull-down menu: in zo'n selectielijst staan dan alle 'menu-opties' met in het VALUE-attribuut de URL die geladen moet worden als die optie aangeklikt wordt. Een beetje JavaScript zorgt dan voor de afhandeling.

Bij een selectielijst (<SELECT>) staan de waarden van alle opties in een array options[], en staat de index van de geselecteerde optie in de variabele selectedIndex. De waarde van de optie die aangeklikt is staat dus in de variabele Lijstobject.options[Lijstobject.selectedIndex].value, als Lijstobject een verwijzing naar een lijst is. Deze verwijzing geven we aan het JavaScript door met behulp van het keyword this. Deze bevat namelijk altijd een verwijzing naar het object vanwaaruit het keyword aangeroepen wordt.

Dit is het JavaScript:

- in de <HEAD>-sectie van het document:

<SCRIPT LANGUAGE="JavaScript"> <!-- function Navigeer(lijst) {   var Geselecteerd = lijst.selectedIndex   // als de bovenste optie geselecteerd is niets doen   if (Geselecteerd != 0) {     window.location = lijst.options[Geselecteerd].value;   } } // --> </SCRIPT>

- in het document zelf:

<FORM> <SELECT onChange="Navigeer(this);">   <OPTION VALUE="">Selecteer een optie   <OPTION VALUE="index.html">Index   <OPTION VALUE="pagina2.html">Pagina 2   <OPTION VALUE="pagina3.html">Pagina 3 </SELECT> </FORM>

Het plaatsen van meerdere van deze menu's op één pagina is erg simpel: er verandert namelijk niets aan het script omdat via het keyword this wordt doorgegeven om welk object het gaat.


Laatste wijziging: 28-09-2002 - Copyright © 1996-2000 Bas Jansen (www.basjansen.com) - URL: http://html.op-het.net/printen/formulieren.html