» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #137

Maak je formulieren vriendelijk - Een glimlach kost niets

Formulieren: de meeste webontwerpers en -bouwers schijnen er niet veel lol in te hebben. Toch is aan het maken van formulieren best veel eer te behalen. Er bestaan allerlei technieken om je formulier extra mooi en gebruiksvriendelijk te maken.

Laten we eens kijken naar de mogelijkheden. Eerst bouwen we het formulier in (X)HTML, vervolgens maken we het op met CSS en tenslotte kijken we naar een paar manieren om je formulier nét dat beetje extra te geven.

De code

Stel, je bent benieuwd naar de voorkeuren van je bezoekers, dus je besluit om een kleine enquête te maken. Je begint met bouwen (XHTML) en hebt al snel de basis van je formulier af:

<form action="/">
 <h1>Enquête</h1>
 Naam<input id="naam" type="text" /><br />

 E-mailadres<input id="email" type="text" />
 <input id="oker" type="checkbox" />oker<br />
 <input id="indigo" type="checkbox" />indigo<br />
 <input id="violet" type="checkbox" />violet
 <select id="dier"> 
  <option>Emoe</option>

  <option>Koala</option>
  <option>boktor</option>
  <option>libelle</option>
 </select>

 <button type="submit">verzenden</button>
</form>

Dit is het absolute minimum: het werkt, maar er ontbreken een aantal tags die het formulier veel gebruiksvriendelijker zouden maken. Hoe kan het beter?

<fieldset> en <legend>

Lange formulieren kunnen nogal intimiderend overkomen op je bezoeker. Je kunt je formulier overzichtelijker maken door het op te splitsen in gedeelten. In elk deel plaats je de vragen die bij elkaar horen, voorzien van een toepasselijk kopje. Hier bestaat een HTML-tag voor: de fieldset. De meeste browsers geven de fieldset uit zichzelf al een border. Uiteraard kun je dat lijntje vervangen door je eigen vormgeving. Bij de fieldset hoort een legend, tussen de <legend> tags zet je de bijbehorende kop.

Gebruik

Wil je bijvoorbeeld de eerste twee vragen in een fieldset zetten, dan doe je dat zo:

<fieldset>
 <legend>Uw gegevens</legend>

 Naam<input id="naam" type="text" /><br />
 E-mailadres<input id="email" type="text" />
</fieldset>

<label>

Stel je voor dat je je formulier niet kunt zien, maar alleen kunt horen (bijvoorbeeld omdat je een screenreader gebruikt). Het wordt moeilijk om te bepalen welke vraag bij welk invoerveld hoort als je ze niet naast elkaar ziet staan. Hier is een oplossing voor en dat is de label-tag: het label vertelt aan de browser welke zaken bij elkaar horen. Je zet de begeleidende tekst tussen de label-tags, en bij het ‘for’-attribuut van het label vul je de ID in van het bijbehorende invoerveld.

Dit is niet alleen handig voor blinde bezoekers, maar voor bijna iedereen. Klik maar eens op de tekst naast een checkbox: dankzij het label wordt de box automatisch aangevinkt. (Ik zei ‘bijna iedereen’: dit werkt namelijk in alle moderne browsers, behalve Safari.)

Gebruik

Als je labels toevoegt aan het (verbeterde) eerste deel van je formulier, gaat het er zo uitzien:

<fieldset>
 <legend>Uw gegevens</legend>
 <label for="naam">Naam</label><input id="naam" type="text" /><br />

 <label for="email">E-mailadres</label><input id="email" type="text" />
</fieldset>

Tip: wanneer je labels gebruikt, zouden in theorie een invoerveld en het bijbehorende label niet direct naast elkaar hoeven te liggen. In de praktijk is het het meest gebruiksvriendelijk wanneer je je aan deze regels houdt:

  1. Zet het label vóór het bijbehorende invoerveld
  2. Maar zet bij checkboxes en radiobuttons het label er juist achter.

<optgroup>

Het gebruik van drop-down lijsten is lang niet altijd een goed idee. Voor mensen die zonder muis moeten surfen zijn ze bijvoorbeeld lastig in het gebruik, en in veel gevallen zul je merken dat je met bijvoorbeeld een paar radiobuttons ook een heel eind komt. Mocht je een goede reden hebben om er toch mee te werken, denk dan eens aan de optgroup-tag. Hiermee groepeer je bij elkaar horende keuzemogelijkheden en dat maakt je keuzelijst een stukje overzichtelijker.

Gebruik

Als we de optgroup-tag gaan gebruiken, ziet onze keuzelijst er als volgt uit:

<select id="dier"> 
 <optgroup label="zoogdieren">
  <option>Emoe</option>
  <option>Koala</option>

 </optgroup>
 <optgroup label="insecten">
  <option>boktor</option>
  <option>libelle</option>
 </optgroup>

</select> 

Nog een paar aandachtspunten

Het kan geen kwaad om in je HTML voor de invoervelden een maxlength op te geven, zolang je maar niet te streng bent. Het voordeel van een maxlength is dat je het spammers en hackers moeilijker maakt om jouw formulier te misbruiken voor hun eigen doeleinden. Maar zorg dat legitieme bezoekers er geen last van hebben – ook iemand die in Gasselterboerveenschemond woont, wil zijn complete plaatsnaam in kunnen vullen!

Een laatste opmerking: inputs en labels zijn inline elementen. Het gevolg daarvan is dat ze allemaal achter elkaar gezet worden wanneer je het formulier zonder styling bekijkt. Om het formulier ook zonder stylesheet bruikbaar te houden (een vereiste van het W3C), zijn tussen de label/input-paren een aantal <br /> tags toegevoegd.

De vorm

We hebben nu een toegankelijk gebouwd formulier (bekijk het formulier), dat er werkelijk niet uitziet. Daar gaan we wat aan doen.

Elementen als fieldsets en labels zijn goed aan te passen via CSS. Dat geldt echter niet voor alle elementen; vormgeving van o.a. buttons en inputs wordt door de ene browser beter ondersteund dan door de andere. Safari ondersteunt het bijvoorbeeld nauwelijks. Afgezien daarvan vinden sommige mensen dat je form controls helemaal niet zou moeten vormgeven, omdat dat niet gebruiksvriendelijk zou zijn. Het idee daarachter is dat mensen eraan gewend zijn dat knoppen een bepaalde standaardvorm hebben. Wanneer een knop er anders uitziet, zou je bezoeker dus heel even moeten zoeken, voordat hij zich realiseert waar hij op moet klikken. Is dat erg? Trek je eigen conclusies, maar houd in elk geval in je achterhoofd dat formulieren niet bedoeld zijn om naar te kijken, maar om te gebruiken.

Uiteraard is de vormgeving van je formulier helemaal afhankelijk van de rest van de site. Mijn voorbeeld formulier is dan ook alleen maar bedoeld om een indruk te geven van de mogelijkheden om met CSS (en een minimale aanpassing aan de HTML: het toevoegen van classes aan een aantal elementen) het bovenstaande formulier een totaal ander uiterlijk te geven.

Een paar bijzonderheden uit de stylesheet

Extra: JavaScript voor meer invulplezier

Je hebt nu een gebruiksvriendelijk en mooi opgemaakt formulier. Vaak is dat al genoeg. Bij lange en/of ingewikkelde formulieren kun je nog een stapje verder gaan om het je bezoekers zo comfortabel mogelijk te maken. Hieronder een paar suggesties, met links naar een uitgebreide uitleg.

Form validation

Het is zeer aan te raden om bij elk formulier aan de serverkant een vorm van controle op de input los te laten, o.a. om te voorkomen dat hackers, spammers en andere onverlaten je mailbox of database vervuilen. Voor de gewone bezoeker is het prettig, want sneller, als je ook aan de voorkant controleert of alle velden wel op de juiste manier ingevuld zijn.

Helpfunctie

Soms wil je binnen het formulier een vorm van hulp bieden bij het invullen. Daar kun je natuurlijk pop-ups voor gebruiken, maar er zijn betere manieren.

Optionele velden verbergen

Bij de meeste formulieren wordt een onderscheid gemaakt tussen verplichte en optionele invulvelden. In sommige gevallen kan het heel handig zijn als de gebruiker met één muisklik de optionele velden kan verbergen.

Velden die niet van toepassing zijn, verbergen

Bij wat ingewikkeldere formulieren komt het regelmatig voor dat je vragen, die niet van toepassing zijn op jouw situatie, mag overslaan. Het is natuurlijk mooi als die velden automatisch worden verborgen.

Tenslotte...

Zoals je hebt gezien, kun je met weinig moeite van elk formulier een wonder van gebruiksvriendelijkheid maken. Gebruik in elk geval altijd fieldsets met legends en labels – een kleine ingreep die voor sommige bezoekers een wereld van verschil maakt. Bovendien geven deze tags meteen wat houvast voor je CSS. Om het helemaal af te maken kun je nog wat JavaScript in de strijd gooien.

Ooit zullen er nog meer specifieke HTML-tags beschikbaar zijn voor formulieren. Er wordt op het moment namelijk gewerkt aan Web Forms 2.0: de specificatie voor formulieren van de toekomst. Zo hebben de auteurs bijvoorbeeld het ‘required’ attribuut bedacht, waarmee je in de HTML verplichte velden kunt markeren. Het document is nog lang niet af, maar geeft al wel een goed idee van wat er gaat komen.

Auteur

Maaike de Laat

is na de kunstacademie in Groningen aan de slag gegaan als zelfstandig grafisch ontwerper. Naast het ontwerpen van drukwerk en websites bouwt ze haar sites ook graag zelf.

Haar eigen site heeft inmiddels al anderhalf jaar een tijdelijke status, maar daar wordt aan gewerkt. Binnenkort.

Publicatiedatum: 17 april 2007

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-2012 » NAAR VOREN en de auteurs