Webformulieren
Een webformulier is een doorgeefluik voor informatie: een bezoeker van een website vult antwoorden op het formulier in en stuurt via een druk op een knop naar de maker van de site. In dit artikel leggen we uit hoe u webformulieren bouwt, welke veldtypes er bestaan en waar formulieren handig en bruikbaar voor zijn.
"Hoe ingewikkeld we webformulieren ook maken, het principe dat er achter zit blijft altijd gelijk: een bezoeker van de webpagina tikt gegevens in de velden van het formulier en klikt daarna op de verzendknop, waarna de informatie automatisch door de browser wordt doorgestuurd voor verdere bewerking. Wáár die gegevens precies naartoe gaan en wat er daar mee gebeurt, hangt af van waarvoor de webmaster de gegevens nodig heeft. Zo kunnen ze (via de standaard postmethode) naar de webserver worden verzonden, waar een of ander programmaatje de formuliergegevens opvangt en verwerkt. Dat programma kan bijvoorbeeld een cgi-script zijn, geschreven in de taal Perl (veel providers bieden zulke cgi-scripts gratis aan), of een script dat bijvoorbeeld geschreven is in de taal php. Het is echter ook mogelijk dat een druk op de verzendknop van het formulier een nieuwe webpagina in beeld zet, of dat de ingetikte gegevens naar een gewoon e-mailadres worden doorgezonden. Soms worden de gegevens helemaal niet verstuurd, maar blijven ze in het formulier op de webpagina staan om bijvoorbeeld door een programma in javascript te worden gebruikt. Verderop in dit artikel komen deze soorten van afhandeling allemaal aan bod. Maar eerst de hoofdvraag: hoe zet je een formulier in een webpagina? Dat stelt eigenlijk niks voor. Zodra u ergens in uw webpagina de code
tikt, weet de browser dat er een formulier begint. Met de codesluit u het formulier af en kan de webpagina weer verder gaan met gewone tekst of andere html-code. Tussen die twee form-codes (ook 'tags' genoemd) bouwt u dus uw specifieke formulier. ***eersteform.tif Een eerste formulier In afbeelding 1 vindt u een kenmerkend voorbeeld van een webformulier. Bovenaan staat de html-code, onderaan ziet u een schermdump van hoe dit formulier er in een webbrowser uitziet. In de afbeeldingen in dit artikel staat de meeste html-code in hoofdletters geschreven en de namen die u zelf mag kiezen in kleine letters, maar dat is alleen voor de duidelijkheid; voor een browser maakt het niets uit. Laten we de onderdelen van dit formulier eens stap voor stap nalopen. Na de gebruikelijke html-begintags zien we, de start van het formulier. Op diezelfde regel geven we het formulier ook een zelfgekozen naam, in dit geval name=“myform”. Dit is niet voor het formulier zelf niet strikt noodzakelijk, maar wij doen het toch, omdat we zodadelijk JavaScript gaan gebruiken en dan is een eigen naam voor het formulier onmisbaar. Na de naam volgen method=“post” en action=“”. Deze twee aanwijzingen vertellen de browser wat hij met de ingevulde gegevens moet doen. In dit geval dus helemaal niks. De verstuurmethode is weliswaar 'post', maar omdat er in dit voorbeeld geen actie is gedefinieerd zal er niets gebeuren als iemand op de verzendknop klikt. Zoals we in het begin al opmerkten, kunnen de gegevens uit een formulier op allerlei manieren worden verwerkt. Stel dat op de webserver een cgi-script staat met de naam 'joepie', dat ontworpen is om de gegevens uit het formulier te bewerken, dan zorgt action=“joepie” ervoor dat de formuliergegevens naar dit specifieke script worden gestuurd. Wilt u liever dat de formuliergegevens door het programma hoi.php worden verwerkt, typt u action=“hoi.php”. U begrijpt dat deze scripts natuurlijk niet toevallig op de server van uw internetprovider zullen staan, dus kunnen we dit niet testen. Verderop bekijken we echter andere manieren om te controleren of de gegevens wel echt worden doorgestuurd. Eerst bekijken we nog even de rest van het formulier. De -tag is erg belangrijk, want deze geeft aan welk soort invoerveld in het formulier wordt afgebeeld. In dit geval kiezen we een invoerveld van het type text, waarin de gebruiker gewone tekst kan typen. De naam van het veld is naam (name=“naam”), de beginwaarde is leeg (value=“”) en we zetten de breedte van het invoerveld op 25 tekens (size=“25”). Op de volgende regel definiëren we de standaard ingebouwde verzendknop (via ) en geven we deze als tekst 'Verstuur gegevens'. Daaronder zetten we nog de standaardknop die automatisch ingevulde tekst wist, voor als de gebruiker per ongeluk een fout heeft gemaakt (). Ook de tekst op deze knop mogen we weer zelf kiezen, in dit geval 'Wis gegevens'. De-tag sluit het formulier tot slot af. Een simpele enquête Als u benieuwd bent wat uw bezoekers van uw website vinden, kunt u ze natuurlijk vragen een mailtje te sturen met hun commentaar. Met behulp van een formulier kunnen we dit proces automatiseren. In afbeelding 2 ziet u de html-code voor een formulier dat drie radiobuttons gebruikt (met daaronder weer een schermdump van hoe dit er in een webbrowser uitziet). We lopen de onderdelen even langs. Na de-tag volgt eerst weer de methode (post) en dan het formaat waarin de gegevens moeten worden gecodeerd (enctype=“text/plain”, dat wil zeggen: gewone tekst). Deze toevoeging is nodig omdat we in dit geval als action “mailto:kees@vuiksvertier.nl” kiezen. Ofwel: stuur de gegevens als gewone e-mail naar het betreffende mailadres. Zodra u nu op de verzendknop klikt, zal uw eigen e-mailprogramma automatisch opstarten en de gegevens versturen. De meeste mailprogramma's geven u hierbij uit oogpunt van veiligheid de gelegenheid eerst nog te controleren om welke gegevens het precies gaat. Radiobutton Het enquêteformulier gebruikt een invoerveld dat we nog niet kennen: de radiobutton. Omdat de drie buttons dezelfde naam hebben (“keuze”), worden ze als één groep beschouwd, met als gevolg dat je altijd maar één van de drie kunt aanklikken - precies het gedrag dat radiobuttons behoren te vertonen. Gaat u dit formulier zelf testen, zult u zien dat er een boodschap verstuurd wordt van de vorm 'keuze=3', of 'keuze=2', afhankelijk van welke keuze u had aangevinkt. (Kies s.v.p. wel een ander adres, anders word ik overstroomd met dit soort mailtjes) Tijd besparen Een vragenlijstje via e-mail is natuurlijk niet ideaal, want het betekent dat u elk mailtje afzonderlijk met de hand moet verwerken; een script op de webserver dat dit automatisch afhandelt, zou veel handiger zijn. Maar ja, dat programma moet u dan zelf schrijven (of misschien biedt uw provider hiervoor een kant-en-klaar cgi-script?). Maar toch kan deze simpele aanpak tijd besparen, zeker als u diverse vragen wilt stellen en als u als waardes geen 1, 2 of 3 gebruikt, zoals hier, maar duidelijke omschrijvingen (bijvoorbeeld ). Soorten invoer Behalve tekstvelden en radiobuttons kan een formulier nog diverse andere types invoervelden bevatten, waarvan we hier de meest voorkomende zullen behandelen. In de afbeeldingen tonen we opnieuw eerst de html-code, met daaronder het beeld zoals het er in de browser uitziet. ***vormgeving: de afbeelding invoer.tif moet hier in drieën geknipt worden, tot de afbeeldingen 3 4 en 5 Select Een van de meest gebruikte invoervormen is het selectveld. Dit type is eigenlijk geen veld, maar een afrolmenu met een aantal opties. Merk op dat de woorden appel, peer en banaan in het afrolmenu verschijnen, maar dat een klik op bijvoorbeeld appel de waarde rood toekent aan variable uwKeuze. De gebruiker kan in dit voorbeeld maar één keuze uit de lijst maken, maar als u de definitie verandert in , kan men meer vruchten tegelijk kiezen. tekstvlak Het volgende type is het tekstvlak (textarea), zeg maar een grotere variant van het tekstveld waarin de gebruiker een lap tekst kan typen (de waarde van die lap tekst wordt in dit geval in de variabele 'commentaar' gezet). U kunt het tekstvlak een naam geven, de breedte (cols) en hoogte (rows) instellen, aangeven dat de regels automatisch moeten omlopen (wrap= “on”), een beginwaarde toekennen (hier leeg) en de maximale lengte opgeven van de in te voeren tekst. Tekstvlakken worden over het algemeen gebruikt om de bezoeker de kans te geven eigen opmerkingen of commentaar te leveren. checkbox Het laatste type invoerveld dat we hier behandelen is de checkbox. Elke checkbox krijgt een eigen naam en waarde en de gebruiker kan een of meer van deze vakjes aanvinken. Hierin verschilt het van de radiobutton, waar men altijd maar één keuze kan maken. (Wat dat betreft is dit voorbeeld natuurlijk erg slecht gekozen; bij JA en NEE vink je normaal gesproken óf het een óf het andere aan, maar niet allebei tegelijk. Het is natuurlijk maar een voorbeeld. Hidden Tot slot bestaat er ook nog een verborgen veld (type= “hidden”), dat niet in het formulier wordt afgebeeld maar er wél gewoon deel van uitmaakt. Dit kan erg handig zijn voor als u informatie wilt meesturen die niet door de gebruiker mag worden gelezen of veranderd. javascript De informatie in een formulier hoeft niet noodzakelijkerwijs te worden doorgestuurd, maar kan ook worden gebruikt door een javascript-programma dat op dezelfde html-pagina staat. Hier kunt u bijvoorbeeld gebruik van maken wanneer u interactieve spelletjes in deze taal wilt schrijven. Zodra het javascript-programma informatie van de gebruiker nodig heeft, leest het de waardes uit de betreffende invoervelden van een formulier. En andersom, als het programma een mededeling wil doen of resultaten wil afbeelden, schrijft het die informatie in formuliervelden. setfocus Wij bekijken in dit artikel geen spelletjes, maar twee eenvoudiger stukjes javascript. Het eerste zet de 'focus' (zeg maar de cursor) op het eerste veld van een formulier, zodat de gebruiker niet eerst met de muis in dat veld hoeft te klikken als hij gegevens wil gaan invullen. Dit kost weinig moeite, maar u doet uw bezoekers er veel plezier mee! In afbeelding 6 ziet u de code. Het formulier dat we hier gebruiken is hetzelfde als in voorbeeld 1, behalve dat het invoerveld nu tekstveld heet (name=“tekstveld”). De javascript-code staat in deze afbeelding bovenaan, geschreven in bruin. De eerste regel vertelt de browser dat er een script begint in de javascript-taal. Daarna wordt er een functie gedefinieerd met de naam setfocus(). Die functie doet maar één ding: het zet de focus op het object 'tekstveld' van het object 'myform', dat ergens in de huidige pagina (object 'document') staat. Of anders gezegd: de functie roept de ingebouwde methode 'focus()' van dat object aan. Dankzij de code onload=“setfocus()” in de -tag van de pagina, zorgt de browser ervoor dat bij het inladen van de pagina meteen de functie setfocus() wordt uitgevoerd. Volgende pagina Het volgende voorbeeld van de interactie tussen formulieren en javascript is wat ingewikkelder en introduceert twee nieuwe fenomenen: de 'gewone button' en de manier om hiermee een javascript-functie aan te roepen die een nieuwe html-pagina in beeld zet. Het formulier in afbeelding 7 bevat een afrolmenu met de naam keuze (), met drie opties (die als waarde test1.htm, test2.htm en test3.htm hebben), waarbij de eerste optie al automatisch is ingevuld dankzij de toevoeging van het woord selected. Onderaan het formulier staat een nieuwe invoervorm: de button (dus geen standaard submit-button, maar een zelfgedefinieerde knop). Die button heeft als tekst “Laat zien...” en als je hier op klikt wordt de javascript-functie toon() aangeroepen (onClick=“javascript:toon()”), die op zijn beurt de gekozen htm-pagina in beeld zet via document.location.href = myform.keuze.value. ***bestelformulier.tif tabellen Tot slot nog een laatste opmerking: we hebben ons in dit overzicht niet druk gemaakt om de vormgeving, maar zeker bij grote formulieren blijkt het in de praktijk vaak lastig om alle invoervelden en bijschriften netjes op dezelfde lijn te krijgen. U kunt dit alleen oplossen door tabellen te gebruiken. Bekijk het bestelformulier in afbeelding 6 en de code waarmee dit is gemaakt (let hierbij specifiek op de breedte van de linker tabelcellen, die overal op 180 schermpixels is gezet, en op de align-aanwijzingen). Met dit voorbeeld als leidraad, ontwerpt u binnen de kortste keren zelf professionele formulieren! "
