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