<form method="post" action="script.cgi" target="_blank">
Het formulier (tekst, invoervelden en knoppen)
</form>
Hierboven ziet u de basisstructuur van de code voor een invulformulier.
Het formulier begint met <form> en eindigt met </form>.
Daar tussen staan de invoervelden, de toelichtingen bij de velden en de knoppen.
Die toelichtingen kunnen op dezelfde manier als andere tekst in HTML ingevoerd worden. De invoervelden en knoppen worden hieronder behandeld.
U kunt een formulier gebruiken voor allerlei doeleinden, maar de belangrijkste is wel voor het verzenden van berichten naar uw emailadres, rechtstreeks vanaf uw website.
Voor genealogische websites kan een uitgebreid invulformulier bijvoorbeeld helpen om bezoekers die meer informatie voor u hebben precies dat in te laten vullen wat u weten wilt.
U hebt echter wel een zogenaamd cgi-script nodig dat voor de verzending zorgt.
Er zijn websites waar zulke scripts gratis aangeboden worden.
U hoeft zich daar alleen maar aan te melden en u krijgt dan een code die u in het formulier verwerkt
(meestal de waarden voor de de attributen in de <form> tag).
method="..." : de methode van verzenden van het formulier (twee mogelijkheden: "post" en "get"; wat precies het verschil is, is te technisch om hier uit te leggen; welke u moet gebruiken wordt u wel verteld door degene die u het script levert dat u gebruikt) action="..." : het adres waarnaar het formulier verzonden wordt, meestal dus een cgi-script (u kunt hier ook uw emailadres als "mailto:email@adres.nl" invullen; het formulier wordt dan via het emailprogramma van de bezoeker naar uw emailadres verzonden; het attribuut "method" moet dan als eigenschap "post" hebben; dit is echter niet ideaal) target="..." : het frame waarin het resultaat van het formulier (bv. een bedankpagina of zoekresultaten) getoond moeten worden (zonder dit attribuut wordt de pagina geopend in het frame waarin het formulier zich bevindt; meer hierover in het gedeelte over frames) target="framenaam" : in het frame met de naam 'framenaam' target="_blank" : in een nieuw venster target="_parent" : in het frame boven het frame waarin het formulier zich bevindt target="_top" : boven alle frames, dus in het hele venster target="_self" : in het frame waarin het formulier zich bevindt
Een verzonden formulier komt op uw emailadres terecht als een bericht met een serie veldnamen en waarden (veldnaam=waarde; veldnaam=waarde; enz.)
Elke veldnaam correspondeert met een invoerveld of keuzemogelijkheid in uw formulier en de waarden zijn de gegevens die door de bezoeker daar zijn ingevuld.
De soorten velden en knoppen die er zijn worden hieronder uitgelegd.
In tekstvakken kan tekst worden ingevuld die met het formulier verzonden wordt. Er is geen sluittag. Voorbeeld:
type="text" : geeft aan dat het een tekstvak is type="password" : geeft aan dat het een tekstvak is waarin een wachtwoord wordt ingevuld (bij het invullen zijn er alleen rondjes zichtbaar) name="..." : de veldnaam value="..." : de beginwaarde die is ingevuld als de pagina geladen wordt (als de inhoud van het vak niet gewijzigd wordt, wordt deze waarde verzonden) size : de grootte van het vak in aantal tekens maxlength : het aantal tekens dat maximaal ingevuld kan worden
Keuzevakjes geven een optie aan die gekozen kan worden. Er is geen sluittag. Voorbeeld:
type="checkbox" : geeft aan dat het een keuzevakje is name="..." : de veldnaam value="..." : de waarde die wordt verzonden wanneer het betreffende keuzevakje geselecteerd is checked="checked" : geeft aan dat dit keuzevakje bij het openen van de pagina geselecteerd is
Keuzerondjes bevinden zich altijd in een groep van minimaal twee keuzevakjes. Per groep kan er maar één optie gekozen worden. Er is geen sluittag. Voorbeeld:
type="radio" : geeft aan dat het een keuzerondje is name="..." : de veldnaam (keuzerondjes die een groep vormen waarvan er één gekozen kan worden, moeten dezelfde veldnaam krijgen!) value="..." : de waarde die wordt verzonden wanneer het betreffende keuzerondje geselecteerd is (bij elk keuzerondje dus een andere waarde!) checked="checked" : geeft aan dat dit keuzerondje bij het openen van de pagina geselecteerd is (per groep keuzerondjes kan er dus maar één dit attribuut krijgen!)
Onzichtbare formuliervelden zijn voor de bezoeker onzichtbaar.
De waarde ervan kan dus niet veranderd worden, maar wordt wel meegezonden als het formulier verzonden wordt.
Bijvoorbeeld als u eenzelfde formulier op meerdere pagina's gebruikt, kunt u dit veld gebruiken om aan te geven vanaf welke pagina het formulier verzonden is.
Er is geen sluittag.
type="hidden" : geeft aan dat het een onzichtbaar formulierveld is name="..." : de veldnaam value="..." : de waarde die wordt verzonden
Wanneer er op de knop voor verzenden geklikt wordt, wordt het formulier verzonden.
Er is geen sluittag. Voorbeeld:
type="submit" : geeft aan dat het een knop voor verzenden is name="..." : de veldnaam value="..." : het opschrift dat op de knop staat en tegelijk een waarde die met het formulier wordt verzonden (u kunt dus meerdere van deze knoppen maken met steeds dezelfde veldnaam, maar met elk een andere waarde; elk van deze knoppen verzendt het formulier, maar ze geven elk een andere waarde mee voor de veldnaam van de knop; voorbeeld: een knop voor aanmelden en een knop voor afmelden)
Knop voor herstellen
<input type="reset" value="Herstellen">
Wanneer er op de knop voor herstellen geklikt wordt, wordt het formulier teruggebracht in de staat waarin het was toen de pagina geopend werd. Er is geen sluittag. Voorbeeld:
type="reset" : geeft aan dat het een knop voor herstellen is value="..." : het opschrift dat op de knop staat
Keuzevelden geven een uitklap- of schuifmenu met een aantal opties.
Het menu staat tussen <select> en </select>.
Daarbinnen staan de opties tussen <option> en </option>.
Voorbeelden van een uitklapmenu en een schuifmenu:
name="..." : de veldnaam size="..." : het aantal opties dat het menu hoog is (bij 1 is het een uitklapmenu (dropdown-menu), bij meer dan 1 een schuifmenu met een schuifbalk) value="..." : de waarde die wordt verzonden wanneer de betreffende optie geselecteerd is (als dit attribuut wordt weggelaten geldt de tekst tussen <option> en </option> als waarde) selected="selected" : geeft aan dat deze optie bij het openen van de pagina geselecteerd is
Tekstvakken met meer dan 1 regel
<textarea name="veldnaam" rows="5" cols="60">
de tekst die in het tekstvak staat als de pagina geladen wordt
ook spaties, regeleinden en HTML-tags worden in het tekstvak getoond: <b><i><u>
</textarea>
In tekstvakken met meer dan 1 regel kan tekst worden ingevuld inclusief regeleinden.
Er kan dus een complete email of een andere langere tekst in worden ingevuld.
De beginwaarde wordt nu tussen de begintag en de eindtag geplaatst,
zodat ook daarin een indeling over meerdere regels mogelijk is.
Regeleinden en spaties worden daarbij WEL als spaties en regeleinden getoond
en ook HTML-tags worden in het tekstvak zichtbaar. Voorbeeld:
name="..." : de veldnaam cols="..." : de breedte van het tekstvak in aantal tekens rows="..." : de hoogte van het tekstvak in aantal regels (als er meer regels nodig zijn, verschijnt er een schuifbalk)
