• Finalist Infinity Blog Award banner

Stap 14 – Formulieren

Laatste update: 3 maart 2019

In stap 13 heb je geleerd een e-maillink te maken. Hiermee wordt het standaard e-mailprogramma opgeroepen, maar je kunt ook een e-mail versturen via een online formulier. Dat is natuurlijk erg gebruikersvriendelijk en je hebt het voordeel dat je vooraf al de benodigde informatie kunt inwinnen van iemand.

FORM-element

Formulieren worden op Internet gebruikt voor verschillende doeleinden. De meest bekende toepassing is het e-mailformulier, maar je kunt er ook quizjes mee maken, berekeningen laten uitvoeren en peilingen. Het is dus belangrijk dat je dit onder de knie krijgt wanneer je websites gaat ontwikkelen.

Hoe je het ook wend of keert, formulieren bestaan uit twee onderdelen:

  1. Een verzoek voor informatie / actie
  2. Het verwerken van informatie / actie

Versturen via scripts

Het gedeelte waar informatie ingevoerd wordt, maken we met HTML. Het gedeelte waarmee de ingevulde verwerkt wordt, heeft een scriptingtaal nodig. Dit kan een PHP 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.

Versturen via HTML

In puur HTML kun je gebruik maken van de “mailto:”-waarde om te proberen de informatie te versturen. Dit maakt 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 ingevulde informatie raak je waarschijnlijk kwijt en de bezoeker moet dan alsnog een bericht typen. Vandaar dat dit niet aan te raden is.

E-mailformulier maken

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

<html>
<head>
<title>mijn eerste e-mailformulier</title>
</head>
<body>
<form action="mailto:info@noratol.nl" mehtod="post" enctype="text/plain">
<p>Mijn naam is: <br />
<input type="text" name="naam" size="30" /></p>
<p>Ik ben een:<br />
<input type="checkbox" name="geslacht" value="man" /> man<br />
<input type="checkbox" name="geslacht" value="vrouw" /> vrouw<br />
<input type="checkbox" name="geslacht" value="genderneutraal" /> genderneutraal</p>
<p>Mijn e-mailadres is:<br />
<input type="text" name="email" size="30" /></p>
<p>Ik vind deze site:<br />
<select name="rapportcijfer">
<option value="geweldig">geweldig</option>
<option value="ok">ok</option>
<option value= "verschrikkelijk">verschrikkelijk</option>
</select></p>
<p>Mijn reactie:<br />
<textarea cols="10" rows="10" name="reactie" wrap="virtual">
</textarea></p>
<p>
<input type="submit" value=" versturen " />
<input type="reset" value=" reset " />
</p></form>
</body>
</html>

Stap 14b – Openen van een formulier

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

Action

De attributen actie (ACTION) en methode (METHOD) koppelen vertellen de browser wat er moet gebeuren, wanneer het formulier verzonden wordt. Laat me uitleggen wat ze doen.

<form action="mailto:info@noratol.nl">

Bij ACTION stel je een lokatie in. Hier gaat de browser naar opzoek, wanneer de verzendknop ingedrukt is. Normaal gesproken is dat een URL. Dit handelt het verzenden af, of gebruikt de ingevulde informatie ergens in de backend van de site.

In de pure HTML versie gebruik je bij ACTION de “mailto:” -instelling die ik bij Stap 13 introduceerde.

Method

<form action="mailto:info@noratol.nl" method="post">

Bij METHOD geef je aan hoe de informatie verwerkt moet worden. Je kunt hier kiezen tussen POST of GET. Het klikt bijna alsof je kiest tussen het versturen of opslaan van de gegevens, maar het gaat om hoe de informatie verstuurd wordt van het formulier naar het script dat de gegevens moet verwerken. De methode GET stuurt alle gegevens door als een lange URL. Het is zichtbaar via de browser, in het adresbalk. De methode POST verstuurd de gegevens via de HTTP-headers. Zo wordt het niet voor de bezoeker zichtbaar in een URL.

Wanneer je PHP of ASP werkt, dan kan het openen van het formulier er zo uit zien:

<form action="FormMail.php" method="post">
of
<form action="FormMail.asp" method="post">

Enctype

Het is handig om ook in te stellen welk soort informatie het formulier kan verwachten. Dit kan met het attribuut ENCTYPE (encryptie type).

In HTML 5 is dit overigens vervangen door FORMENCTYPE.

Alleen tekst:

<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”.

Diverse data, inclusief upload bestanden:

Bij een sollicitatieformulier wil je misschien dat iemand een CV kan meesturen. Dat moet je dan wel ondersteunen in je formulier. Dat kan zo:

<form action="mailto:info@noratol.nl" method="post" enctype="multipart/form-data">

Alles toelaten:

Als je alle vormen van data en uploads wilt toelaten, dan kun je dit gebruiken:

<form action="mailto:info@noratol.nl" method="post"
enctype="application/x-www-form-urlencoded">

Dit is ook de standaard instelling als je helemaal niets instelt.

Benamingen geven aan een formulier

Wanneer je HTML met scripttalen als JavaScript gaat combineren, dan wil je waarschijnlijk je formulier een unieke naam geven. Daar is de NAME-attribuut heel handig voor.

<form name="testformulier" action="mailto:info@noratol.nl" method="post">

Stap 14c – tekstveld

Een klein 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.

Type

Bij het attribuut TYPE geef je aan wat voor soort veld het moet worden. Door hier “text” in te stellen, zal de browser automatisch een veld weergeven waar mensen in kunnen typen. Echter ondersteunt deze instellingen maar 1 regel tekst.

Name

Een naam (NAME) geven aan het tekstveld is noodzakelijk. Overigens is dit voor elk deel van het formulier belangrijk! De tekst die je tussen de aanhalingstekens plaatst, zul je terugzien in de e-mail. Kies de benamingen zorgvuldig, want die namen zouden jou moeten helpen tekst van de verzender te kunnen begrijpen. Je moet hiermee dus de, door de gebruiker opgegeven, informatie kunnen herleiden.

Size

Bij het optionele attribuut SIZE kun je de breedte van het veld instellen. De hoogte is niet in te stellen met HTML (wel met CSS). Wil je een groter invulveld, bijvoorbeeld omdat iemand meer ruimte moet krijgen dan 1 regel tekst, gebruik dan TEXTAREA (zie Stap 14e)

Stap 14d – aanvinkmogelijkheden (checkboxes en radio buttons)

Om aanvinkmogelijkheden te creëren in HTML, gebruik je het TYPE checkbox:

<input type="checkbox" name="geslacht" value="man" /> man<br />
<input type="checkbox" name="geslacht" value="vrouw" /> vrouw<br />
<input type="checkbox" name="geslacht" value="genderneutraal" /> genderneutraal

Zoals je ziet is het attribuut TYPE op “Checkbox” gezet. De tekst tussen aanhalingstekens bij het NAME-attribuut, zal weergegeven worden in de e-mail die je ontvangt. Terwijl NAME jou een referentie zal gegeven naar de vraag die je gesteld hebt, zal de tekst bij VALUE jou het antwoord geven. Kortom, als iemand “man” aangevinkt heeft, zie je in de mail “geslacht: man” staan (Ofwel NAME: VALUE). Alleen waarden van de aangevinkte checkboxes zul je in de e-mail ontvangen.

Alle checkboxes in dit voorbeeld horen bij dezelfde vraag, omdat ze allemaal dezelfde naam hebben. Binnen een formulier kun je dus meerdere vragen aanmaken; ieder met hun eigen checkboxes. Je hoeft ze dan alleen een andere naam te geven.

Het is belangrijk te het verschil te weten tussen een checkbox en een radio button. Bij het TYPE checkbox kunnen mensen meerdere opties per vraag aanvinken. In sommige gevallen is het handiger als mensen iets daadkrachtiger antwoord kunnen geven. Om hun aanvinkmogelijkheden te beperken, gebruik je Radio Buttons. Deze aanvinkmogelijkheden zijn rond en een bezoeker mag er maar 1 aanvinken. Alle overige instructies zijn hetzelfde als bij checkboxes.

Zo maak je Radio Buttons aan:

<input type="radio" name="geslacht" value="man" /> man<br />
<input type="radio" name="geslacht" value="vrouw" /> vrouw<br />
<input type="radio" name="geslacht" value="genderneutraal" /> genderneutraal

Stap 14e – dropdown menu

Een andere manier om de bezoeker maar 1 keuze te laten maken, is het gebruiken van een dropdown menu (uitvouwmenu).

De SELECT-tag moet geopend en gesloten worden. De NAME attribuut gebruik je als referentie voor jezelf. Hiermee moet je kunnen achterhalen waar het antwoord over gaat. Alles wat je tussen <SELECT> en </SELECT> zet, wordt gezien als onderdeel van het uitvouwmenu.

Om de optielijst te maken, waar mensen uit kunnen selecteren, gebruik je de OPTION-tag. Je kunt er zoveel toevoegen als je wilt. Zorg wel dat ze allemaal een unieke waarde hebben. De waarden geeft je bij het VALUE-attribuut aan. In de e-mail die je ontvangt, zie je alleen de waarde terug van de optie die iemand geselecteerd heeft:

<select name="rapportcijfer">
<option value="geweldig">geweldig</option>
<option value="ok">ok</option>
<option value= "verschrikkelijk">verschrikkelijk</option>
</select>

Stap 14f – textarea

Uiteraard wil je dat mensen je een echt bericht kunnen sturen, zoals ze je ook zouden kunnen e-mailen. Omdat een tekstveld weinig ruimte biedt, biedt de TEXTAREA-tag hier uitkomst. Mensen kunnen door de enter toets gewoon nieuwe regels aanmaken, die ook terugziet in de e-mail die je ontvangt. De benaming die je bij het attribuut NAME invult, zie je als referentie in je e-mail terug.

<textarea cols="10" rows="10" name="reactie" wrap="virtual">
</textarea>

Kolommen en rijen (COLS en ROWS)

Bij deze tag geef je aan uit hoeveel kolommen (COLS) en rijen (ROWS) het invulvenster moet bestaan. Dit bepaalt alleen hoe groot het veld eruit komt te zien op de website. Mensen worden hierdoor niet belemmerd door een limiet op hoeveel ze typen.

Maxlength

Zou je wel willen limiteren hoeveel iemand mag typen, dan voeg je het optionele MAXLENGTH-attribuut toe,:

<textarea cols="10" rows="10" name="reactie" wrap="virtual" maxlength="255">
</textarea>

Met bovenstaande toevoegingen heb je de gebruiker gelimiteerd tot 255 karakters. Meer dan dat kan deze niet typen.

Wrap

De WRAP is optioneel, maar het is wel zo gebruikersvriendelijk. Met WRAP=VIRTUAL zorg je dat zinnen afgebroken worden, wanneer de gebruiker de rechterkant van het invulvenster raakt. Net als dat je gewend zou zijn in tekstverwerkers. Zou je dit niet doen, dan kunnen ze doortypen tot oneindig en wordt de tekst in de browser weergegeven als een lange zin. Heel irritant.

Readonly en Disabled

Nog twee andere attributen die optioneel toe te voegen zijn, zijn READONLY (alleen lezen) en DISABLED (uigeschakeld). Velden die uitgeschakeld zijn worden niet zichtbaar, velden met alleen lezen worden wel zichtbaar, maar de bezoeker kan er niets mee.

<textarea name="reactie" disabled></textarea>

<textarea name="reactie" readonly></textarea>

Stap 14g – buttons

Wat is een online formulieren zonder knoppen?! Nou, eigenlijk worden er niet meer in alle formulieren knoppen gebruikt, maar alle formulieren hebben nog wel iets nodig om tot actie over te gaan. Dat kan een enter zijn, een link, foto of toch die button. De submit-knop is daardoor best handig:

<input type="submit" value=" versturen " />

Bovenstaande knop gaat het formulier versturen. Dat houdt in dat de informatie van het formulier gestuurd wordt naar de locatie die je bij ACTION opgegeven hebt, toen je formulier opende.

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. Wil je een andere breedte, dan kun je een SIZE instellen: <input type=”submit” value=”versturen” size=”60″ /> Echter doet niemand dit zo. We gebruiken CSS.

Er bestaat ook een reset-knop, die alle ingevulde velden weer leegmaakt:

<input type="reset" value=" reset " />

Buttons met scripting

In combinatie met scripttalen als JavaScript en PHP, kun je gebruik maken van het TYPE button. Dit genereert een button, die alleen reageert op wat acties die door Javascript getriggerd moeten worden. Ze zouden er dan zo ongeveer uit kunnen zien:

<input type="button" name="stem" value="ja" onclick="calltoJavascript();" />
<input type="button" name="stem" value="nee" onclick="calltoJavascript();" />

Wat ingevuld is bij NAME correspondeert vaak met codes in JavaScript.

Stap 14h – grafische buttons

Met bovenstaande opties voor buttons krijg je de standaard grijze knoppen. Wil je zelf kunnen bepalen hoe een knop eruit ziet, dan kun je met CSS buttons stylen. Echter kun je ook plaatjes gebruiken voor de buttons. Daarvoor gebruik je de volgende HTML code:

<input type="image" src="zendknop.jpg" alt="Verzend" />

Door bij TYPE de term “image” in te vullen weet de browser dat plaatje onderdeel van het formulier is. Bij SRC plaats je de locatie en naam van het plaatje. Met de ALT optie geef je de tekst van de knop op. Deze wordt zichtbaar wanneer de graphic niet zou verschijnen.

Stap 14i – bestanden versturen in formulieren

Als je een bestand wilt versturen via een formulier moet je de ENCTYPE van het formulier instellen op “multipart/form-data” of “application/x-www-form-urlencoded”. Daarnaast werkt dit niet als het niet ondersteund wordt door het script, waarmee de uiteindelijke mail verstuurd wordt. Ook moet je rechten hebben op de server om een bestand vanuit een browser te uploaden. Dit werkt sowieso niet als je alleen HTML gebruikt. Je moet dus gebruik maken van CGI, PHP of ASP om bestanden te kunnen versturen.

Heb je dat allemaal, dan 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.

Stap 14j – Formuliervelden en Scripting

Omdat formulieren veelal gebruikt worden in combinatie met scripts, zijn er nog wat veldtypes die handig zijn te kennen.

Veld voor wachtwoorden

Omdat je wachtwoorden niet zichtbaar wilt hebben, terwijl iemand typt is er een speciaal wachtwoord-veld. Deze geeft de tekst niet weer, maar laat bolletjes zien:

<input type="password" name="wachtwoord" />

Verborgen velden

Bij gebruik van alleen maar HTML klinkt dit knettergek en heb je het niet nodig, maar geloof me, in scripting is dit je beste vriend: verborgen velden! Het maakt het mogelijk informatie door te sturen, zonder dat iemand het persé ziet. Dat klinkt heel creepy als je een gewone internetgebruiker bent, maar het valt best mee. Je ziet de velden namelijk wel gewoon als je in de bron van de pagina kijkt. Maar voor een ontwikkelaar betekent dit dat je bijvoorbeeld iemands naam door kan sturen van het ene formulier naar het andere, of van een pagina naar het andere. Het hoeft nergens opgeslagen te worden, zodat mensen die enge cookies niet hoeven op te slaan. Het heeft natuurlijk voor- en nadelen. En daarnaast zijn er nog tig van andere mogelijkheden om deze velden in te zetten.

Dit is hoe je een verborgen veld maakt:

<input type="hidden" name="mijngeheim" />

Vaak gebruik je dan het VALUE-attribuut met een waarde die je eerder opgeslagen hebt. Stel dat dit veld gebruikt wordt, nadat ons formulier.html bestand ingestuurd is. Daarin werd om een naam gevraagd. Dan kan ik in dit formulier, vanuit mijn PHP script, de naam van de verzender oppakken. Dat zou er dan zo uitzien:

<input type="hidden" name="naam" value="<?php $_POST['naam']; ?>" />

Naar stap 15

Bookmark the permalink.

Comments are closed.