Handleiding HTML - Formulieren - Voorbeeld vragenformulier

HTML		Formulieren

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Voorbeeld vragenformulier

Dit is een voorbeeld van een vragenformulier, waarin de volgende controls zijn opgenomen: gewone en verborgen tekstvelden, keuzerondjes, aankruisvakjes, een tekstvak en een knop voor verzenden. Het is de bedoeling dat de in het formulier ingevulde gegevens per e-mail naar een bepaalde bestemming worden gestuurd. Omdat aan het gebruik van mailto-formulieren nogal wat nadelen kleven, is ervoor gekozen de informatie van het formulier te laten verwerken door een script op de server. In dit geval wordt daarbij gebruik gemaakt van de diensten van Freedback.com. Deze zijn gratis, alleen moet je wel accepteren dat er reclame staat op responspagina en in het e-mailbericht.

Freedback.com heeft zowel een CGI-script als een PHP-script. Van het CGI-script werd in het verleden standaard gebruik gemaakt. Het heeft als nadeel, dat je e-mailadres (weliswaar niet direct zichtbaar) in het formulier zelf is opgenomen. Wanneer je je nu nieuw aanmeldt, dan krijg je code waarmee je gebruik kunt maken van het PHP-script. In die code is je e-mailadres versleuteld opgenomen, waardoor het niet misbruikt kan worden voor spam en virussen.

In het CGI-script zijn de namen van de eerste vijf controls in het voorbeeld gekoppeld aan het script: "to", "subject", "name", "from" en "required_fields". Je vindt de waarden van de eerste vier controls terug in de corresponderende velden in de header van het e-mailbericht ("aan", "onderwerp", "naam afzender" en "e-mailadres afzender". Het vijfde control geeft aan welke velden de bezoeker verplicht moet invullen. De rest van het formulier kun je zelf ontwerpen. De blokhaken aan het eind van de naam van de aankruisvakjes zijn nodig, omdat anders alleen de laatst geselecteerde mogelijkheid in de resultaten wordt vermeld.

Om de omvang wat te beperken is in de code van dit voorbeeld de tekst tussen de onderdelen en alle overige HTML-code weggelaten.

<FORM METHOD="post" TARGET="_blank"
ACTION="http://cgi18.Freedback.com/mail.pl">

<INPUT TYPE="hidden" NAME="to" VALUE="gebruiker@provider.nl">

<INPUT TYPE="hidden" NAME="subject"
VALUE="Voorbeeldformulier Handleiding HTML">

<INPUT NAME="name" SIZE="45">

<INPUT NAME="from" SIZE="45">

<INPUT TYPE="hidden" NAME="required_fields" VALUE="name, from">

<INPUT TYPE="radio" NAME="Inhoud" VALUE="goed" CHECKED> goed
<INPUT TYPE="radio" NAME="Inhoud" VALUE="redelijk"> redelijk
<INPUT TYPE="radio" NAME="Inhoud" VALUE="matig"> matig
<INPUT TYPE="radio" NAME="Inhoud" VALUE="slecht"> slecht

<INPUT TYPE="radio" NAME="Presentatie" VALUE="goed" CHECKED> goed
<INPUT TYPE="radio" NAME="Presentatie" VALUE="redelijk"> redelijk
<INPUT TYPE="radio" NAME="Presentatie" VALUE="matig"> matig
<INPUT TYPE="radio" NAME="Presentatie" VALUE="slecht"> slecht

<INPUT TYPE="checkbox" NAME="Betrokken[]" VALUE="prive">
privé
<INPUT TYPE="checkbox" NAME="Betrokken[]" VALUE="beroepsmatig">
beroepsmatig

<TEXTAREA NAME="Opmerkingen" ROWS="3" COLS="45">
</TEXTAREA>

<INPUT TYPE="reset" VALUE="Beginwaarden">
<INPUT TYPE="submit" VALUE="Verzenden gegevens">

</FORM>

Ook in het PHP-script horen de namen van de eerste vijf controls in het voorbeeld bij het script. In dit geval gaat het om: "acctid", "formid", "name" en "email" en "required_vars". De waarden van de controls "acctid" en "formid" krijg je bij aanmelding van Freedback.com en staan respectievelijk voor je e-mailadres en het onderwerp van het bericht. De waarden van "name", "email" en "required_vars" staan voor respectievelijk de naam van de afzender, het e-mailadres van de afzender en de verplichte velden. De rest van het formulier is hetzelfde als bij het CGI-script.

<FORM METHOD="post" TARGET="_blank"
ACTION="http://www.freedback.com/mail.php"
ENCTYPE="multipart/form-data">

<INPUT TYPE="hidden" NAME="acctid" VALUE="nzk1u5xcjq2311nr">

<INPUT TYPE="hidden" NAME="formid" VALUE="99999">

<INPUT NAME="name" SIZE="45">

<INPUT NAME="email" SIZE="45">

<INPUT TYPE="hidden" NAME="required_vars" VALUE="name, email">

...

</FORM>

Het formulier ziet er als volgt uit:

Voorbeeld vragenformulier

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin