Internetformulieren – keuzevelden

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:

Pepperoni

Quoatro Stagioni

Fruti di Mari

Tonino

Radio buttons
Met de volgende code maak je een lijst met radio buttons:

1) Het type is checkbox.
2) Door alle radio buttons 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 radio de tekst die je wilt laten zien aan je bezoekers.

Dit ziet er als volgt uit:

Pepperoni

Quoatro Stagioni

Fruti di Mari

Tonino

Single select box
Met de volgende code maak je een single select box:

De opbouw van dit element is heel anders:
1) Alle opties worden omgeven met een select tag.
2) Elke optie geef je aan met een option element; het value attribuut bevat de waarde die wordt verstuurd; wat tussen de begin- en eind-tag staat ziet je bezoeker.
3) Aangezien de bovenste optie als eerste wordt getoond, heb ik een extra optie toegevoegd: [Kies]. Met de vierkante haken geef je aan dat het een optie is die geen onderdeel uitmaakt van de rest van de lijst.

Dit ziet er als volgt uit:

[Kies]PepperoniQuoatro StagioniFruti di MariTonino

Multiple select box
Als je wilt dat je bezoekers meer dan 1 item kunnen kiezen kan je gebruik maken van een multiple select box:

De opbouw van dit element is gelijk aan de single select, maar met toevoeging van het woord multiple. Verder geef je met size aan hoeveel elementen je bezoeker in 1x ziet.

Dit ziet er zo uit:

PepperoniQuoatro StagioniFruti di MariTonino

Als een bezoeker meer dan 1 element wil kiezen moet hij de control toets vasthouden. Aangezien niet iedereen dit begrijpt gebruik ik nooit een multiple select.

Hoe kies je het juiste element?
Welke je kiest hangt af van meerdere factoren:
1) kan een bezoeker slechts 1 of meerdere opties kiezen?
2) hoeveel opties heb je?

Keuze tussen 1 of meerdere opties
Als je een vraag stelt waarop maar 1 antwoord mogelijk is, maak dan gebruik van een selectbox of van radio buttons. Als er meerdere antwoorden mogelijk zijn, gebruikt dan een multiple selectbox of checkboxes. In dit voorbeeld: het verschil tussen de keuze voor 1 pizza of meerdere pizza's tegelijk.

Hoeveel opties heb je?
Een paar richtlijnen:
1) Als je een vraag hebt met maar 1 optie, gebruik dan een checkbox.
2) Heb je een paar opties (2-10), gebruik dan checkboxes of radio buttons (dit scheelt je bezoeker 1 klik).
3) Het je meer dan 10 opties? Gebruik dan een selectbox.
Dit zijn geen wetten van Meden en Perzen; wat je uiteindelijk kiest hangt ook af van de context van de rest van je formulier. Hoe langer een formulier, des te compacter je misschien wilt werken.