HTML college: FORMS

Tot nu toe hebben we gezien dat je webpagina's kunt maken met tekst, plaatjes, hyperlinks en image-maps. Met die hyperlinks en image-maps krijgt de gebruiker al een beetje het idee dat hij of zij zelf bepaalt wat er op het scherm komt, maar van echte interactie is nog geen sprake. Dat gaat nu veranderen. In dit hoofdstuk zie je dat de gebruiker wel degelijk interactief met webpagina's kan werken.

Wat hebben we voor hulpmiddelen om je website interactief te maken ? Denk eerst eens na over wat voor interactiviteit je nodig hebt. Wil je de gebruiker een formulier laten invullen en iets met de gegevens doen, ga je een koppeling maken met een database waarin die gegevens verwerkt worden, wil je een spel schrijven dat de gebruiker kan spelen, of wil je alleen maar dat de plaatjes veranderen als de mousepointer erover beweegt ?
De volgende tabel geeft de belangrijkste mogelijkheden die er momenteel zijn.

Mogelijkheden voor interactie met de gebruiker
  Client-side Server-side
Java Volwaardige programma's (applets) Databasekoppeling, interactie met server
Javascript (Eenvoudige) programma's of checks op de client -
PHP - Databasekoppeling, meer complexe scripts
CGI - Allerlei programma's en scripts
Flash/Actionscript
 Vanalles Weet ik niet

Welke programmeertalen zou je kiezen om een site te maken waarmee mensen zich kunnen inschrijven voor sportlessen ?

Een eenvoudig formulier

De meest eenvoudige vorm van een invulformulier is een keuzeknop, een tekst-invoerveld of een selectiemenu met een knop om het formulier te versturen. Bij de form-tag zijn twee attributen van belang: method en action. Met method geef je aan hoe de gegevens verstuurd worden (zie verderop) en met action wijs je een programma aan dat de gegevens gaat verwerken. 
<form method="GET" action="get_post.php">
<input type="text" name="tekstveld" value="Vul wat in" size="30" maxlength="30">
<p>
<input type="submit" value="Verzend gegevens">
</form>

Door op de knop "Verzend gegevens" te drukken wordt het formulier verstuurd naar de webserver.

Forms en CGI

In dit college gaan we het hebben over HTML-formulieren en daarbij wordt het mechanisme om de informatie uit formulieren te verwerken heel kort behandeld. Het schrijven van programma's die dat doen valt buiten de doelstellingen van dit HTML-college maar als je ermee aan de gang wilt wil ik je graag helpen. Of kijk alvast naar het PHP-college, dat is wel zo handig voor server-side programmeren.

Bij forms moet je denken aan allerlei invulschermpjes en knoppen die je kunt gebruiken om informatie aan de gebruiker te vragen, zoals naam, adres en een voorkeur voor witbrood, bruinbrood of muesli. Eigenlijk een elektronisch formulier dus.

Alle form-elementen op een rijtje

Kijk eens naar deze voorbeelden van FORM elementen. daar zie je alle FORM-elementen in hun eenvoudigste vorm. Kijk in de bron (source) om te zien hoe dit formulier opgebouwd is.

Form-elementen die je kunt gebruiken
element type beschrijving
button submit|reset|button Een knop om een formulier te verzenden, wissen of gewoon zomaar een knop.
input button bijna hetzelfde als de button tag maar minder flexibel
checkbox selecteren van nul of meer keuzes
file stuur een file van de client naar de server (accept= type constraint)
hidden voor het doorgeven van waarden naar de server, hiermee kun je HTML context geven, dus geheugen
image clickable image
password afgeschermd (maar niet 'secure' !!!)
radio selecteren van precies 1 keuze
reset wis alle velden
submit verstuur deze form naar de server. Er mogen meerdere submit buttons in een form voorkomen.
text plain text
label   Geeft een label aan een element
fieldset Maakt een groep van elementen
legend Geeft een groep van elementen een label
select Pull-down menu van keuzes (option tags)
textarea Text-gebied dat meerdere regels kan beslaan

Bijna alle elementen hebben een naam om ze op de server te kunnen onderscheiden.

Volgorde van formulier-elementen

Voor een gebruiker is het vaak handig om met de TAB toets van veld naar veld te kunnen springen. Let erop dat de volgorde van springen hetzelfde is als de volgorde waarin je de FORM-elementen in je file zet, ook al zet je ze in een tabel !

Je kunt deze volgorde ook zelf instellen met het attribuut tabindex dat een getal als waarde krijgt. Dat getal is het volgnummer van het element.

Kun je een formulier verzinnen waarbij de volgorde van de elementen belangrijk is ?

Meerdere HTML-formulieren in dezelfde pagina

Je mag meerdere formulieren in een HTML-document opnemen. Neem wel voor elke form een submit-knopje op, anders kun je er weinig mee, tenzij je JavaScript gaat gebruiken. Geef elk formulier ook een naam, bijvoorbeeld name="winkelwagenform" of name="userinfoform" of zoiets.

De gegevens uit een formulier naar iemand toe mailen

<form method="POST" action="mailto:nobody@noserver"
      enctype="text/plain"
      onsubmit="window.alert('Formulier gemaild !')" >
<input type="text" name="tekstveld" value="Vul wat in" size="30" maxlength="30">
<p>
<input type="submit" value="Verzend gegevens">
</form>

Wees je bewust van het feit dat de informatie niet-versleuteld wordt verstuurd als je enctype=text/plain gebruikt. Deze methode is ongeschikt voor het versturen van confidentiele gegevens !

Gebruik je GET of POST ?

Bij de GET method worden alle parameters in een lange rij aan de URL toegevoegd. Direkt na de URL komt dan een vraagteken en daarna alle paren van naam=waarde die worden doorgegeven. De paren worden gescheiden door &.

Om het mogelijk te maken om speciale tekens te versturen wordt een codering gebruikt. Hierbij wordt de hexadecimale ASCII-waarde gebruikt, voorafgegaan door een %-teken. Spaties worden vervangen door een '+'.
Een paar voorbeelden:

$%24
[%5B
]%5D

Een voordeel van GET is dat het relatief eenvoudig is om een CGI-programma of scriptje te maken dat de parameters uit de URL leest en gebruikt.

Het nadeel van de GET method is dat je gewoon op de URL-regel van de browser alle informatie uit de FORM kunt lezen. Dit is dus niet geschikt om passwords of andere gevoelige informatie te versturen. De POST method is daarvoor meer geschikt. Daarbij wordt de informatie niet aan de URL geplakt maar apart naar de browser gestuurd. Je ziet dan de invoer van het FORM niet op de URL-regel dus dit biedt iets meer privacy. Realiseer je dat de informatie niet versleuteld wordt verstuurd, dus voor echte 'security' moet je met encryptie werken.

Vergelijk het volgende formulier eens met het eerste formulier op deze pagina. Het enige dat veranderd is is de method: die is nu POST in plaats van GET. Kijk naar de URL-regel van je browser. 

<form method="POST" action="get_post.php">
<input type="text" name="tekstveld" value="Vul wat in"
    size="30" maxlength="30">
<p>
<input type="submit" value="Verzend gegevens">
</form>

Een ander voordeel van de POST method is dat je meer gegevens kunt versturen dan bij GET omdat sommige browsers of webservers niet met lange URL's kunnen werken.