Om je bezoekers in je formulier meerdere keuzes aan te bieden kan je gebruik maken van 3 type formulier elementen: een selectbox (single of multiple), een lijst met radio buttons of een lijst met checkboxes. Aan de hand van een pizza bestelformulier zal ik de verschillende mogelijkheden verder uitwerken.

Checkboxes
Met de volgende code maak je een checkbox:

1) Het type is checkbox.
2) Door alle checkboxes dezelfde naam te geven (name) groepeer je ze bij elkaar in het formulier.
3) In het value attribuut geef je de waarde mee die vanuit het formulier verstuurd moeten worden.
4) Zet achter elke checkbox de tekst die je wilt laten zien aan je bezoekers.

Dit ziet er als volgt uit:

Eerder heb ik toegelicht hoe een internetformulier werkt. In dit artikel meer over twee soorten velden die zichtbare teksten kunnen verwerken. Het input veld (type text) en de textarea. Onderdelen van formulieren worden controls genoemd. Hoe werken ze en wanneer gebruik je ze?

Input veld – type = text
Een input veld voor korte teksten is het input type=text veld. Denk hierbij aan velden voor voornaam, achternaam, e-mail etc. Voor wachtwoorden gebruik je een ander veld, het input type="password". Je maakt het input type=text veld als volgt:

Het effect hiervan is:

Voornaam

1) Zoals je kunt zien zet ik de uitleg van het veld ervoor in het label element.
2) Door het input element als type 'text' mee te geven geef je aan er teksten in ingevuld kunnen worden.
3) Het name attribuut heb je nodig het element een unieke naam te geven.
4) Met het value attribuut kan je al een waarde meegeven. Normaal gesproken laat je dit leeg, tenzij je de waarde al weet.
5) Met size geef je de zichtbare lengte van het veld op.
6) En met maxlength bepaal je hoeveel tekens er maximaal in het veld ingevuld kunnen worden.

In de begintijd van internetformulieren zag je vaak teksten in deze elementen als 'Type hier uw naam'. Dat hoeft tegenwoordig niet meer.
De weergave van het element kan je met CSS aanpassen. Met behulp van Javascript kan je ook beinvloeden wat je bezoekers wel of niet kunnen invullen. Hierop zal ik in een ander artikel nader ingaan.

Het gebruik van een internet formulier maakt je leven een stuk gemakkelijker. Het stelt je in staat om te communiceren met je bezoekers, informatie te verzamelen en daarmee in je bedrijf allerlei werkprocessen aan te sturen. De grens tussen een website en software wordt daarmee soms moeilijk aan te geven.
Het eerste formulier dat de meeste mensen op een website plaatsen is het contactformulier. Ben je benieuwd waaraan zo'n formulier het beste kan voldoen? Lees dan mijn eerdere artikel over richtlijnen voor een contactpagina.

Hoe werkt een formulier op internet?
Met speciale code kan je een HTML formulier maken. De informatie die je bezoeker hierin invult wordt naar een server gestuurd. Deze kan er iets mee doen en vervolgens erop reageren. Dit ziet er ongeveer zo uit:

Het is hierbij niet zo dat de verbinding met de website constant is. Bij elke pagina wordt deze opnieuw gelegd! Dat kan lastig zijn als je meerdere stappen hebt in een formulier. Maar hiervoor zijn allerlei oplossingen bedacht, zoals cookies en sessies. Hierop zal ik in een later artikel terugkomen.

POST en GET methode
Voor het versturen van een formulier zijn er 2 manieren (methodes): POST en GET. De eerste raad ik je aan te gebruiken, omdat dit er speciaal voor gemaakt is. Het verschil zit in de codering van de data die je verstuurt.

Met GET verstuur je informatie via het internet adres: de URL. Een URL heeft een beperkte lengte, dus op een gegeven moment zit deze vol. Bovendien moet je extra inspanningen verrichten om alle karakters goed via een URL door te geven weer te ontcijferen. Bijvoorbeeld: naam=Theo%20Bakker is de weergave van 'Theo Bakker' in een URL. De HTML code is voor dit type formulier:

Als je met een programmeur spreekt over het maken van een website kan het zijn dat de termen functioneel ontwerp en technisch ontwerp vallen. Een functioneel ontwerp is een beschrijving van de werking van je website, de functionaliteiten. In dit artikel meer over het nut van een functioneel ontwerp, hoe je dit opstelt, en wat het verschil is met een technisch ontwerp.

Het nut van een functioneel ontwerp
Misschien denk je, waarom zou ik een functioneel ontwerp willen schrijven? Een eenvoudige website is toch niet zo ingewikkeld? Belangrijkste reden is: een functioneel ontwerp (FO) voorkomt problemen in interpretatie!

Een functioneel ontwerp helpt je dus om duidelijkheid te verschaffen in de afspraken die je maakt met een programmeur. Als je dit niet doet en ervan uitgaat dat het in de prijs is inbegrepen, kan het zijn dat je niet krijgt wat je verwachtte.

Hoe stel je een functioneel ontwerp op?
Ga alsvolgt te werk:
1) Op basis van je sitemap kan je bepalen welke pagina's je hebt in je website en welke soort pagina's er zijn. Begin hiermee. Per type pagina neem je in je functioneel ontwerp een beschrijving op. Heb je nog geen sitemap, maak die dan eerst.
2) Denk bij het beschrijven van een functionaliteit altijd vanuit de bezoeker! Hoe komt hij/zij op deze pagina? Hoe ervaart hij/zij de werking van deze pagina? Wat ziet hij? Wat moet hij doen om een functionaliteit in gang te zetten?
3) Bedenk vervolgens welke stappen de bezoeker binnen de pagina doorloopt en wat is het resultaat van elke stap.
Het helpt als je er een tekening bij maakt die de verschillende stappen aangeven. Dit kun doen met een programma als Microsoft Visio:

Een voorbeeld: de contactpagina
Ter illustratie werk ik een mogelijk functioneel ontwerp voor een contactpagina uit. De bijbehorende workflow is als hierboven aangegeven.

De meeste sites hebben wel een pagina met FAQ's – Frequently Asked Questions. Een begrip dat inmiddels vrijwel iedereen kent. Deze pagina bevat een overzicht met de meest gestelde vragen en antwoorden. Waaraan moet zo'n pagina voldoen?