Een formulier plaatsen op je website

Op je website kan je een formulier plaatsen dat kan worden gebruikt door bezoekers om informatie te sturen of te vragen, om zich aan te sluiten bij een mailing list, om zich te abonneren op een nieuwsbrief, enz. Hiervoor wordt ook gebruikt gemaakt van een cgi-bin script dat draait op onze servers.

Hieronder word je stap voor stap uitgelegd hoe een formulier wordt opgebouwd.

De functies van het formulier

In dit script dat beschikbaar is op onze servers kan je 4 functies aanpassen (2 verplicht, 2 niet verplicht) die je ingeeft in je HTML-pagina. De code voor deze functies ziet er uit als volgt:

<input type="hidden" name="functie" value="waarde van de functie">

  • input type="...": met input worden items in het formulier geplaatst die te maken hebben met de werking ervan, type="..." precizeert wat er precies geplaatst wordt. Dit kunnen tekstvelden, keuzevakjes, knoppen en zo verder zijn, in dit geval wordt het gebruikt voor het ingeven van een functie.
  • name="..." value="...": in deze code wordt de optie name="..." gebruikt om de eigenlijke functie te plaatsen (hier kan je dus niet kiezen), in de optie value="..." geef je zelf de invulling van de functie. Deze functies zijn de volgende:
    1. <input type="hidden" name="to" value="uw_emailadres"> (verplicht)
      Met deze functie kies je het emailadres naar waar het formulier wordt gestuurd nadat er wordt geklikt op de knop "verzenden"
    2. <input type="hidden" name="next" value="http://users.skynet.be/alias/page html"> (verplicht)
      Er moet vanzelfsprekend ergens vastgelegd worden welke pagina de bezoeker te zien krijgt nadat het formulier is verstuurd.
    3. <input type="hidden" name="subject" value="email_onderwerp">(niet verplicht)
      Je kan ook kiezen welk onderwerp de email heeft die verstuurd wordt door het script, dit kan je dan bijvoorbeeld gebruiken om de boodschappen in je inbox te filteren.
    4. <input type="hidden" name="lang" value="taal">  (niet verplicht)
      Er bestaan 2 varianten van het script voor het formulier op onze Servers (zie verder). Kies hier de taal waarin de tussenpagina wordt getoond aan de bezoeker. Je hebt de keuze tussen "fr" (Frans), "nl" (Nederlands) en "en" (Engels).

De code om het formulier te laten werken

Zoals bij de 4de functie aangehaald bestaan er 2 varianten van het script. Let op wanneer je hiervoor de code ingeeft, want ze verschillen beide maar met 1 letter. Het verschil wordt gemaakt in de code die gebruikt wordt om het script aan te roepen op de server:

<form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
<input...>
<input...>
...
</form>

Dit is het "eenvoudige" script: de bezoeker vult het formulier in, klikt op "verzenden" en krijgt vervolgens de door jouw gekozen pagina te zien

<form method="post" action="http://users.skynet.be/cgi-bin/form.cgi">
<input...>
<input...>
...
</form>

Na het klikken op "verzenden" krijgt de bezoeker eerst een tussenpagina te zien en daarna pas de door jouw gekozen pagina. Aan de tussenpagina kan je dus niets veranderen, wel de taal veranderen met de optie  <input type="hidden" name="lang" value="taal"> (zie hierboven). Op deze pagina staat een schematisch overzicht van de inhoud van het formulier zoals dit is ingegeven door de bezoeker.

Invoervelden en knoppen

Bij het opstellen van een formulier is het zeer belangrijk dat je zo vaak mogelijk gebruik maakt van de optie name="...". Als een lijst met keuzemogelijkheden bijvoorbeeld niet zijn eigen naam heeft "weet" het script niet dat deze mogelijkheden bij elkaar horen en zal je dus ook niet weten wat er precies werd aangeduid door de bezoeker.

Gebruik deze optie om een keuzelijst te maken. Een bezoeker kan zoveel mogelijkheden aanduiden als hij/zij zelf wil.

  • Opties:
    • name="...": door een naam te geven "weet" het script wanneer meerdere checkboxen bij elkaar horen.
    • checked: gebruik deze optie voor een checkbox die standaard aangeduid is.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="checkbox" name="checkbox">Dit is een checkbox<br>
    <input type="checkbox" checked name="checkbox">Deze is standaard aangeduid
    <form>

Soms wil je een lijst waaruit maar 1 item per keer kan worden aangeduid. Hiervoor worden de zogenaamde 'radio-buttons' gebruikt. Vergeet niet de reeks een naam te geven indien je wil weten welk item is aangeduid.

  • Opties:
    • name="...": geef een naam aan bij elkaar horende keuzes.
    • checked: ook in een lijst met radio-buttons kan je een item standaard aanduiden.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="radio" name="reeks1"> er kan maar 1 radio-button uit dezelfde reeks aangeduid zijn<br>
    <input type="radio" name="reeks1"> reeks 1<br>
    <input type="radio" name="reeks1"> reeks 1
    <br>
    <br>
    <input type="radio" name="reeks2"> reeks 2<br>
    <input type="radio" name="reeks2" checked> deze is standaard aangeduid<br>
    <input type="radio" name="reeks2"> reeks 2<br>
    </form>

Als je wil dat de bezoeker ook commentaar kan meesturen kan je hiervoor dit tekstveld inschakelen. Het is echter niet mogelijk op deze manier een echte tekstbox te maken (dus met meerdere lijnen): het veld bevindt zich maximum op 1 regel. Daarom wordt in de praktijk ook meer gebruik gemaakt van de tag <textarea>...</textarea>

  • Opties:
    • name="...": gebruik dit attribuut om te verduidelijken in welk tekstveld welke tekst werd gezet.
    • maxlength="...": geef het maximum aantal karakters op dat kan worden ingevoerd.
    • size="...": de breedte van het zichtbare tekstveld in aantal karakters.
    • value="...": je kan standaard een bepaalde (verwijderbare) tekst in het veld zetten.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="text" name="text" > dit is een eenvoudig tekstveld<br><br>
    <input type="text" name="text15" maxlength="15"> in dit veld kan je maximum 15 karakters kwijt<br><br>
    <input type="text" name="textstandaard" size=50 value="standaardwaarde"> een veld dat 50 karakters breed is en met een standaard invoer
    </form>

Een paswoordveld is eigenlijk gewoon een tekstveld, alleen wordt alle inhoud ervan weergegeven als sterretjes. Met het cgi-script dat op onze servers draait is het niet mogelijk hier een functie aan te koppelen maar mogelijk kan je het nog voor andere zaken gebruiken.

  • Opties:
    • name="...": gebruik dit attribuut om te verduidelijken in welk paswoordveld welke tekst werd gezet.
    • maxlength="...": geef het maximum aantal karakters op dat kan worden ingevoerd.
    • size="..."de breedte van het zichtbare tekstveld in aantal karakters.
    • value="..."je kan standaard een bepaalde (verwijderbare) tekst in het veld zetten.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="password"> een basis wachtwoordveld<br><br>
    <input type="password" maxlength="8"> in dit wachtwoordveld kan je maximum 8 karakters ingeven
    </form>

Wanneer een bezoeker een formulier foutief invult komt de reset-knop van pas om het formulier terug te laden met alle beginwaarden. Alle gewijzigde inhoud wordt dus gewist na het klikken op deze knop.

  • Opties:
    • name="...": wordt zelden gebruikt bij deze functie aangezien er meestal maar 1 resetknop aanwezig is op een formulier waarvan geen waarden moeten worden doorgestuurd.
    • value="...": standaard staat er "Reset" op de knop, maar je kan deze tekst ook wijzigen met deze functie.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="text" maxlength="15"> vul hier iets in en klik op &quot;Reset&quot;<br><br>
    <input type="reset"><br><br>
    <input type="reset" value="Opnieuw"> je kan de knop ook een andere tekst geven <br>
    </form>

De knop der knoppen binnen een formulier. Na het klikken hierop wordt het formulier automatisch doorgestuurd naar het emailadres dat je hebt opgegeven in <input name="to" type="hidden" value="adres" />

  • Opties:
    • name="...": wordt zelden gebruikt bij deze functie aangezien er meestal maar 1 verzendknop aanwezig is op een formulier waarvan geen waarden moeten worden doorgestuurd.
    • value="...": standaard staat er "Submit Query" op de knop, maar je kan deze tekst ook wijzigen met deze functie.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="submit"><br><br>
    <input type="submit" value="Versturen"> Ook van deze knop kan je de tekst veranderen
    </form>

Naast de standaard knop om te versturen (zie hierboven) kan je ook een afbeelding gebruiken als verzendknop. Let er in dit geval wel op dat de bedoeling van deze afbeelding duidelijk is. Net als hierboven wordt het formulier na het klikken op deze afbeelding automatisch doorgestuurd naar het emailadres dat je hebt opgegeven in <input name="to" type="hidden" value="adres" />

  • Opties:
    • src="...": wanneer je een afbeelding gebruikt moet je vanzelfsprekend een pad opgeven naar het bestand.
    • name="...": wordt zelden gebruikt bij deze functie aangezien er meestal maar 1 verzendknop aanwezig is op een formulier waarvan geen waarden moeten worden doorgestuurd.
    • align="...": Je kan de foto een specifieke plaats geven m.b.v. deze optie. Je kan kiezen tussen:
      • align="left": links uitlijnen (tekst komt rechts van de afbeelding)
      • align="right": rechts uitlijnen (tekst komt links van de afbeelding)
      • align="top": de afbeelding wordt bovenaan gecentreerd
      • align="bottom": de afbeelding wordt onderaan gecentreerd
      • align="absmiddle": de afbeelding wordt gecentreerd t.o.v. het midden van de tekst die op dezelfde regel staat.
  • Voorbeeld:
    <form method="post" action="http://users.skynet.be/cgi-bin/formd.cgi">
    <input type="image" src="../../images/testfoto.jpg">Je kan een foto weergeven i.p.v. een knop om het formulier door te sturen<br><br>
    <input type="image" src="../../images/testfoto.jpg" align="right">de foto kan ook worden uitgelijnd
    </form>