Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord
abonneren

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 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
, 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 ), 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! "

Geschreven door: Redactie PCM op

Category: Nieuws, Algemeen

Tags:

Nieuws headlines

donderdag 09 november

Laatste reactie