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

• Laat zien waar je bent

  input:focus, select:focus {
    background-color:#FFFFE6;
    border-color:#423724;
   }
  
  

  De pseudo-property focus zorgt ervoor dat een invoerveld een aangepast uiterlijk krijgt wanneer de cursor erin staat, dus wanneer het veld ‘focus’ heeft. Vooral voor degenen die door het formulier navigeren met de tab-toets in plaats van de muis is dit een handig hulpmiddel. Helaas werkt het niet in Internet Explorer. Dit is echter wel op te vangen met een javascriptje.

• Pas de cursor aan

  label {
    cursor: pointer; 
   }
  
  

  De meeste mensen weten niet dat je op een label kunt klikken om het bijbehorende veld te selecteren. We helpen ze hier letterlijk een handje: de veranderende cursor geeft een hint die mensen aanspoort tot klikken.

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.

• Home
• Artikelen
• Colofon