Stap 14 – formulieren

In de vorige stap hebben we een e-maillink gebruikt om het standaard e-mailprogramma op te roepen van de bezoeker van onze site, maar je kunt ook een e-mail versturen via een online formulier.

Formulieren worden op Internet gebruikt voor verschillende doeleinden. De meest bekende toepassing is het e-mailformulier, maar je kunt er ook quizjes van maken, berekeningen laten uitvoeren en meer.

Versturen via scripts

Een e-mailformulier bestaat uit twee delen. Het gedeelte waar informatie ingevoerd wordt, maken we met HTML. Het gedeelte waarmee de ingevulde informatie verstuurd wordt, heeft een scriptingtaal nodig. Dit kan een PHP of ASP script zijn. Het loont om even de helpdesk te bellen/mailen van je host (provider van jouw website) om te kijken of ze een standaard mailscript bieden. Dit is veelal het geval. In andere gevallen kun je heel snel standaard scriptjes vinden door even een zoekopdracht in Google. Zorg wel dat je weet of PHP of ASP ondersteunt wordt op jouw webserver, en welke versie.

Versturen via HTML

In puur HTML kun je gebruik gaan maken van de “mailto:”-waarde om te proberen de informatie te versturen. Dit maakt, in principe, gebruik van het e-mailprogramma, dat geïnstalleerd staat op de computer van de bezoeker. Net als de e-maillink van de vorige stap dus.

Het kan voorkomen dat, na het aanklikken van de verzendknop, alsnog het e-mailprogramma wordt geopend. De reeds ingevulde informatie van het formulier kan hierdoor compleet verloren raken. De bezoeker dient dan nogmaals het bericht te typen.Vandaar dat dit niet aan te raden is.

Om je het toch te kunnen leren, gebruiken we het toch. We maken voor het formulier een nieuwe HTML file aan en noemen deze gemakshalve formulier.html

<HTML>
<HEAD><TITLE>emailform</TITLE></HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<CENTER>
<IMG SRC="images/logo.gif" WIDTH=400 HEIGHT=161 ALT="logo">
<H2>Stuur een e-mail</H2>
</CENTER>
<FORM ACTION="mailto:info@noratol.nl" METHOD="post" ENCTYPE="text/plain">
Mijn naam is: <BR />
<INPUT TYPE="text" NAME="naam" SIZE=30>
<P>
Ik ben:<BR />
<INPUT TYPE="radio" NAME="geslacht" VALUE="man"> man<BR />
<INPUT TYPE="radio" NAME="geslacht" VALUE="vrouw"> vrouw</P>
<P>
Mijn e-mailadres is:<BR />
<INPUT TYPE="text" NAME="email" SIZE=30></P>
<P>
Ik geef deze site een rapportcijfer van:<BR />
<SELECT NAME="rapportcijfer">
<OPTION VALUE="10">10
<OPTION VALUE="voldoende">voldoende
<OPTION VALUE= "onvoldoende">onvoldoende
</SELECT></P>
<P>
Mijn reactie:<BR />
<TEXTAREA COLS=10 ROWS=10 NAME="reactie" WRAP=VIRTUAL>
</TEXTAREA></P>
<P>
<INPUT TYPE="submit" VALUE=" verzenden ">
<INPUT TYPE="reset" VALUE=" reset ">
</FORM></P>
</BODY>
</HTML>

Stap 14b – Openen van een formulier

In het bovenstaande formulier hebben we gebruik gemaakt van verschillende onderdelen dat een formulier kan bevatten: kleine en een grote invulvelden, een dropdown menu, checkboxes (aanvinkvelden) en buttons. Om het formulier te openen, maak je gebruik van de FORM-tag. Alles wat tussen <FORM> en </FORM> staat zal herkend worden als onderdeel van het formulier.

Aan de FORM-tag kun je een actie (ACTION) en een methode (METHOD) geven. Deze mogelijkheden heb je nodig om het formulier in combinatie met scripts geheel via de server te laten lopen. In de pure HTML versie gebruik je bij ACTION de “mailto:” term die ik bij Stap 12 introduceerde.

<FORM ACTION="mailto:info@noratol.nl">

Bij ACTION hoort een lokatie (URL) ingesteld te worden. Deze zoekt de browser op, wanneer er op de verzendknop gedrukt is.

<FORM ACTION="mailto:info@noratol.nl" METHOD="post">

Bij METHOD geef je aan wat er met de informatie gedaan moet worden, dat ingevuld is in alle velden. Je kunt hier kiezen voor de methode POST of GET. Welke je kiest heeft te maken met hoe de informatie in het uitvoerscript verwerkt moet worden. GET verstuurd alle ingevulde informatie als een lange URL. POST verwerkt dat achter de schermen (in de HTTP-headers om precies te zijn).

Indien je met PHP or ASP gaat werken, dan kan het openen van het formulier er als volgt uit zien:
<FORM ACTION="Mail.php" METHOD="post">

of

<FORM ACTION="Mail.asp" METHOD="post">

Om in te stellen welk soort informatie in het formulier ingevoerd mag worden, gebruiken we ENCTYPE, wat aangeeft welk encryptie type het formulier bevat.
<FORM ACTION="mailto:info@noratol.nl" METHOD="post" ENCTYPE="text/plain">

In dit formulier wordt alleen tekst ingevoerd. Vandaar dat we hier kiezen voor “text/plain”, maar andere mogelijkheden zijn “multipart/form-data” en “application/x-www-form-urlencoded”. Zou je bestanden willen verwerken in formulier, dan kies je voor “multipart/form-data”.

Stel, dat je een sollicitatieformulier maakt en je wilt dat iemand een CV kan meesturen, dan zou je dus voor deze optie kiezen. De optie “application/x-www-form-urlencoded” laat alle vormen data toe. Zou je ENCTYPE helemaal niet gebruiken bij het openen van je formulier, dan wordt deze optie als standaardinstelling gebruikt.

Wanneer je HTML met scripttalen als JavaScript gaat combineren, zul je merken dat bij het openen van de FORM-tag ook een naam aan het formulier gegeven kan worden, bijv. <FORM NAME=”formulier”>.
Dit is voor pure HTML niet van belang.

Stap 14c – tekstveld

Een klein, 1 regel, invulveld wordt in HTML een textfield genoemd. Het aanmaken doe je zo:

<INPUT TYPE="text" NAME="naam" SIZE=30>

of

<INPUT TYPE="text" NAME="email" SIZE=30>

Met de INPUT-tag geef je aan dat de bezoeker informatie dient in te vullen.
Bij TYPE geef je aan wat voor soort invulvenster het moet worden. Door hier “text” aan te geven wordt het ook mogelijk gemaakt dat de bezoeker kan typen.
Een naam (NAME) geven aan het tekstveld is noodzakelijk. De tekst die je tussen de aanhalingstekens plaatst, zal in de e-mail als referentie gelden. Door de benamingen goed te kiezen kun je makkelijk de, door de gebruiker opgegeven informatie, herleiden. Bij SIZE kun je de breedte van het veld vergroten. De hoogte is niet in te stellen met HTML (wel met CSS). Wil je een groter invulveld, dan moet je gebruik maken van TEXTAREA (zie Stap 14e)

Stap 14d – aanvinkmogelijkheden

Met HTML kun je ook aanvinkmogelijkheden creëren, bijvoorbeeld een vierkantje:

<INPUT TYPE="checkbox" NAME="geslacht" VALUE="man"> man<BR>
<INPUT TYPE="checkbox" NAME="geslacht" VALUE="vrouw"> vrouw

Weer maak je gebruik van de INPUT-tag, maar dit keer hoeft de bezoeker geen tekst in te vullen, dus we zetten de TYPE op “Checkbox”. De tekst die bij NAME tussen aanhalingstekens staat, zal voor de ingevulde tekst van VALUE weergegeven worden in de e-mail, dus als iemand “man” aangevinkt heeft, zie je in de mail “geslacht: man” staan.

Je kunt ook een rond aanvink-veld creëren:

<INPUT TYPE="radio" NAME="geslacht" VALUE="man"> man<BR>
<INPUT TYPE="radio" NAME="geslacht" VALUE="vrouw"> vrouw

Bij het type radio is het voor de bezoeker mogelijk om maar 1 keuzevakje aan te vinken. Bij een checkbox kan men meerdere opties aanvinken.

Stap 14e – dropdown menu

Om de bezoeker uit meerdere keuzes te laten kiezen, kun je gebruik maken van een zogenaamde dropdown menu. Dit is een uitvouwmenu. Ook hier geef je bij VALUE aan voor welke keuzemogelijkheid de bezoeker gekozen heeft. NAME gebruik je voor een algemene beschrijving van de vraag:

<SELECT NAME="rapportcijfer">
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="voldoende">voldoende</OPTION>
<OPTION VALUE= "onvoldoende">onvoldoende</OPTION>
</SELECT>

Met de SELECT-tag geef je aan dat er uit de volgende opties <OPTION> geselecteerd moet worden. Tussen <SELECT> en </SELECT> kun je zoveel OPTION-tags toevoegen als je wilt.

Stap 14f – textarea

Omdat een tekstveld weinig ruimte biedt, om veel tekst kwijt te kunnen, kun je ook gebruik maken van de TEXTAREA-tag.

<TEXTAREA COLS=10 ROWS=10 NAME="reactie" WRAP=VIRTUAL>
</TEXTAREA>

Bij deze tag geef je aan uit hoeveel kolommen (COLS) en rijen (ROWS) het invulvenster moet bestaan. Met het toekennen van een naam, kun je in de e-mail dat het formulier genereert, makkelijk terugvinden waarop de bezoeker reageert. De WRAP is optioneel. Hiermee bepaal je of zinnen afgebroken moeten worden wanneer de gebruiker het rechtereind van het invulvenster raakt. Zou je dit niet doen, dan wordt de tekst in de browser weergegeven als een lange zin. Met WRAP=VIRTUAL zorg je dat zinnen automatisch worden verbroken, wanneer een woord te lang is om nog op een regel te passen. Dit geeft een mooier en overzichtelijker effect voor de bezoeker.

Stap 14g – buttons

In online formulieren kun je ook knoppen gebruiken. Deze noemen we buttons. Een verplicht onderdeel van een formulier is de verzendknop. Deze maak je als volgt aan:

<INPUT TYPE="submit" VALUE=" verzenden ">

Door bij TYPE “submit” in te vullen, geef je aan dat het de verzendknop is. Bij VALUE geef je de tekst aan, die je op de knop wilt hebben. Dit bepaalt tevens de breedte van de knop.

Als service kun je het formulier ook voorzien van een reset-knop, maar dit is eigenlijk niet meer gebruikelijk. Met een reset-knop maak je alle ingevulde velden weer leeg, wanneer er op de knop gedrukt is. Een reset-knop maak je alsvolgt aan:

<INPUT TYPE="reset" VALUE=" reset ">

Wederom vul je bij VALUE de tekst in, die je op de knop zichtbaar wilt hebben.

In combinatie met de scripttaal JavaScript, kan het zijn dat je met HTML knoppen wilt genereren, die afwijken van de types “submit” en “reset”. Dit doe je met de volgende code:

<INPUT TYPE="button" VALUE=" ja " NAME="ja">
<INPUT TYPE="button" VALUE=" nee " NAME="nee">

Door bij TYPE de term “button” in te vullen worden deze keuzemogelijkheden weergegeven als knop. Bovenstaande buttons zullen alleen werken in samenwerking met JavaScript codes. Wat ingevuld is bij NAME correspondeert vaak met codes in JavaScript.

Stap 14h – grafische buttons

Met alle bovenstaande opties voor buttons krijg je altijd de standaard grijze knoppen die ook d.m.v. de types “submit” en “reset” worden gegenereerd. Soms wil je zelf kunnen bepalen hoe een knop eruit ziet. Dit kan d.m.v. het gebruik van graphics. Om deze te kunnen implementeren in een formulier, maak je gebruik van de volgende HTML code:

<INPUT TYPE="image" SRC="sendknop.jpg" NAME="Verzenden" VALUE="Verzend">

Door bij TYPE de term “image” in te vullen weet de browser dat dit onderdeel van het formulier door een plaatje gemaakt wordt. Bij SRC kan de browser vinden welk plaatje weergegeven moet worden. Bij de optie NAME geef je actie aan die gebeuren moet, wanneer er op het plaatje geklikt wordt. In dit geval is “Verzenden” al voldoende. Hier kun je het beste verschillende dingen uitproberen. Bij VALUE geef je normaal gesproken aan wat voor tekst er op de knop weergegeven moet worden, maar in dit geval zal de tekst alleen weergegeven worden wanneer het plaatje niet blijkt te werken. Dit kun je dus vergelijken met de ALT optie bij de IMG-tag (zie >stap 12)

Stap 14i – bestanden versturen in formulieren

Als laatste wil ik nog even informatie verschaffen over het aanmaken van een veld waarmee je een bestand kan versturen met een formulier. Wil je dit gebruiken, dan moet de ENCTYPE van het formulier ingesteld zijn op

“multipart/form-data”. Daarnaast werkt dit niet als het niet ondersteund wordt door het script waarmee de uiteindelijke mail verstuurd wordt. Dit werkt sowieso niet als je alleen HTML gebruikt. Je moet dus gebruik maken van CGI, PHP of ASP om bestanden te kunnen versturen.
Om in een formulier een veld op te nemen, waarmee een bestand verstuurd kan worden, gebruik je de volgende code:
<INPUT TYPE="file" NAME="bestand">

Deze code genereert niet alleen een invoerveld, maar ook de knop “Bladeren”. Als de bezoeker hierop klikt, kunnen ze op hun eigen computer zoeken naar het bestand dat ze willen meesturen.
Bij NAME voer je de naam van het veld in. Hier kun je zelf een naam voor het veld opgeven.

Naar stap 15

Bookmark the permalink.

Comments are closed