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
sluit 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 -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
Ga naar je inbox om je mail adres te verifiëren en je registratie te voltooien.
Oops… er ging wat mis.
Ons team heeft een bericht gehad en is het probleem aan het verhelpen. Probeer het op een later tijdstip nogmaals.
Hoera, je account is nu geactiveerd!
Veel plezier!
Communitie manager
Dit token is niet meer valide.
Als je zojuist een account hebt aangemaakt probeer dan in te loggen.
Je aanvraag is verstuurd
Er is een e-mail verstuurd naar .
Wachtwoord herstellen
Je wachtwoord is aangepast.
Dit token is niet meer valide.
Je vraag is geplaatst!
Veel plezier!
Communitie manager
Je antwoord is geplaatst!
Veel plezier!
Communitie manager
Bevestigingsmail verstuurd!
Check je mail (op het adres wat je ingevuld hebt). In de mail zit de bevestigings link waarmee je vraag zichtbaar wordt.
Cookies op Pcmweb.nl en overige Reshift websites
Wij maken gebruik van cookies, en dit doen we:
Voor functionele en analytische doeleinden.
Om relevante advertenties te tonen.
Om te zorgen dat je kunt inloggen met je account.
Om onze dienstverlening te verbeteren voor onze gebruikers.
Om te zorgen dat Pcmweb.nl gratis is en blijft.
Wil je meer weten over het gebruik van cookies en hoe wij hier mee omgaan. Lees dan onze complete privacy statement hier.
Waarom betalen?
Wij verdienen ons geld o.a. met advertenties. Wij kunnen onze diensten alleen aanbieden zonder advertenties en bijbehorende cookies als je een betaald abonnement afsluit. Dat kost €99 per jaar, en heeft als voordeel dat wij je geen enkele advertentie laten zien en dat wij geen tracking cookies in jouw browser plaatsen.
Maak een account aan of log in op een bestaand account. Klik vervolgens op de knop "Betaal account" om advertentie- en trackervrij Pcmweb.nl te gebruiken
Wil je toch gebruik maken van onze diensten zonder een abonnement?
Maak een account aan of log in op een bestaand account. Klik vervolgens op de knop "Betaal account" om advertentie- en trackervrij Pcmweb.nl te gebruiken