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.

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

AttribuutResultaat
TYPE=
textinvoervak voor één regel tekst
passwordinvoervak voor één regel tekst, maar je kan niet zien wat er ingevoerd wordt
radiokeuzerondje, meerdere radio's met dezelfde naam worden een array. Binnen een array kan er maar één optie geselecteerd worden
checkboxaankruisvakje
imageaanklikbaar plaatje: coördinaten van de plaats waar geklikt is worden geregistreerd. Alle gegevens worden direct verstuurd als er op het plaatje geklikt wordt!
hiddenverborgen vak: VALUE stelt geregistreerde waarde in. Dit is handig voor bijvoorbeeld het adres van dit formulier. Je weet dan altijd waar dit ingevuld is
filebestand: 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.
submitVerzend-knop: VALUE bepaalt wat er op de knop staat. Als er op deze knop gedrukt wordt, worden de gegevens verstuurd
resetReset-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=nbreedte van het invoervak in tekens, er kan wel langere tekst ingevoerd worden
MAXLENGTH=nmaximale 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
CHECKEDradio 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.

AttribuutResultaat
NAME="naam"naam van het invoervak
COLS=nhet aantal kolommen dat het invoervak breed moet zijn (standaard 40)
ROWS=nhet 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:

<SELECT>

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

AttribuutResultaat
NAME="naam"de naam van de keuzelijst
SIZE=nhet aantal opties in de lijst
MULTIPLEals 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.

AttribuutResultaat
VALUE="waarde"de waarde die doorgegeven moet worden als deze optie geselecteerd is
SELECTEDals 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:

</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>
   EventBetekenis
onSubmitals het formulier verzonden wordt
onResetals er op de reset-knop gedrukt wordt
<BUTTON>, <INPUT>, <SELECT> en <TEXTAREA>
   EventBetekenis
onClickals het element aangeklikt wordt
onFocusals het element de focus krijgt (JS 1.1)
onBlurals het element de focus verliest (JS 1.1)
onChangeals de waarde van het element verandert
onSelectals 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