Gebruiksvriendelijke formulieren

Een van de belangrijkste tags die je moet hebben voor een gebruiksvriendelijk formulier is de tag <label>. Deze tag wijst een tekst toe aan een element van je formulier. Je moet dan wel in de input-tag waar je de label- aan wilt wijzen een id opgeven, die je met de parameter for in de label-tag koppelt aan de parameter id in je input-tag. Klinkt ingewikkeld hè..? Nou dat is het niet:

...
<form action="#" method="post">
<input type="text" name="text" id="text" />
<!-- Onderstaande tekst wil ik toewijzen aan het invoervel hierboven //-->
<label for="text">Plaats cursor in invoerveld</label>
<br />
<input type="submit" name="submit" value="Verzend" />
</form>
...

Voorbeeld: http://jerseyboy.je.funpic.de/formulieren/formulier1.html

De bovenstaande techniek is vooral belangrijk als je met radiobuttons werkt. Windowsgebruikers zijn van Windows gewendt dat ze op de tekst naast het bolletje kunnen klikken (ik weet niet hoe dat bij Linux zit) om het bolletje te selecteren. Het kan irritant zijn om je te moeten aanpassen en op het bolletje in plaats van op de tekst ernaast. Dit zou je bezoeker kunnen kosten...

Naast een label aan je element te plakken, is het ook fijn voor de gebruiker om met een toetsencombinatie het veld te kunnen 'traceren'. Je kunt dit doen met de parameter accesskey in de input-tag. De gebruiker kan dan (zoals hij of zij gewendt is van windows) de toetsencombinatie alt+[letter] gebruiken om het element te selecteren. Je moet er dan wel op letten dat je niet een toetsencombinatie die al bestaat binnen een browser gebruikt. Op de volgende pagina kun je zien welke toetsencombinaties er al zijn bezet voor Firefox en Internet Explorer http://jerseyboy.je.funpic.de/formulieren/onmogelijke%20toetsencombinaties.txt.
Ons hele gebruiksvriendelijke formulier wordt nu:

...
<form action="#" method="post">
<input type="text" name="text" id="text" accesskey="t" />
<label for="text">Plaats cursor in invoerveld</label>

<input type="submit" name="submit" value="Verzend" accesskey="v" />
</form>
...

Natuurlijk weet de gebruiker nu nog niet welke toetsencombinatie hij moet gebruiken. Daarom moet je een letter onderstrepen met <u> of met <span class="u">. Vergeet alleen als je die laatste optie gebruikt (span) niet een class in je stylesheet te maken. Het volledige formulier zou er dus zo uit zien:

...
<form action="#" method="post">
<input type="text" name="text" id="text" accesskey="p" />
<label for="text"><u>P</u>laats cursor in invoerveld</label>
<br />
<input type="submit" name="submit" value="Verzend" accesskey="v" />
</form>
...

Voorbeeld: http://jerseyboy.je.funpic.de/formulieren/formulier2.html

Keuzelijsten kunnen makkelijk onoverzichtelijk raken als ze niet op alfabetiche volgorde staan, en niet gegroepeerd zijn. Gelukkig kun je met een simpel PHP-scriptje of een tekstverwerker gegevens makkelijk op alfabetische volgorde zetten, zodat je al van één probleem af bent.
Maar het groeperen van keuzelijsten gaat niet echt gemakkelijk, als je niet weet hoe dat moet. Maar gelukkig bestaat deze tutorial, die je dat gaat leren. =p
We pakken ons oude gebruiksvriendelijk gemaakte voorbeeldformuliertje erbij, en voegen er een ongesoorteerde en ongegroepeerde keuzelijst aan toe:

...
<form action="#" method="post">
<input type="text" name="text" id="text" accesskey="p" />
<label for="text"><u>P</u>laats cursor in invoerveld</label>
<br />

<!-- De keuzelijst //-->
<select name="plaatsnaam">
<option value="rotterdam">rotterdam</option>
<option value="leiden">leiden</option>
<option value="drachten">drachten</option>
<option value="amsterdam">amsterdam</option>
<option value="amersfoort">amerfoort</option>
<option value="denhaag">den haag</option>
<option value="arnhem">arnhem</option>
<option value="denbosch">den bosch</option>
<option value="voorschoten">voorschoten</option>
<option value="rotterdam">rotterdam</option>
<option value="leiden">leiden</option>
<option value="drachten">drachten</option>
<option value="amsterdam">amsterdam</option>
<option value="amersfoort">amerfoort</option>
<option value="denhaag">den haag</option>
<option value="arnhem">arnhem</option>
<option value="denbosch">den bosch</option>
<option value="voorschoten">voorschoten</option>
<option value="rotterdam">rotterdam</option>
<option value="leiden">leiden</option>
<option value="drachten">drachten</option>
<option value="amsterdam">amsterdam</option>
<option value="amersfoort">amerfoort</option>
<option value="denhaag">den haag</option>
<option value="arnhem">arnhem</option>
<option value="denbosch">den bosch</option>
<option value="voorschoten">voorschoten</option>
</select>

<input type="submit" name="submit" value="Verzend" accesskey="v" />
</form>
...

Voorbeeld: http://jerseyboy.je.funpic.de/formulieren/formulier3.html

Zoals je misschien wel ziet, komen de plaatsnamen meerdere keren voor, maar ik had geen zin om nog meer namen te verzinnen. =p Klik eens op de link, en probeer eens arnhem te zoeken. Je zal zien dat niet echt van je 1, 2, 3 gaat... Maar probeer nu eens onderstaad script, die op alfabetische volgorde staat, met hoofdletters is geschreven en is gegroepeerd in provincie.

...
<form action="#" method="post">
<input type="text" name="text" id="text" accesskey="p" />
<label for="text"><u>P</u>laats cursor in invoerveld</label>
<br />

<!-- De keuzelijst //-->
<select name="plaatsnaam">
<optgroup label="Friesland">
<option value="drachten">Drachten</option>
</optgroup>

<optgroup label="Gelderland">
<option value="arnhem">Arnhem</option>
</optgroup>

<optgroup label="Noord-Brabant">
<option value="denbosch">Den bosch</option>
</optgroup>

<optgroup label="Noord-Holland">
<option value="amsterdam">Amsterdam</option>
</optgroup>

<optgroup label="Utrecht">
<option value="amersfoort">Amerfoort</option>
</optgroup>

<optgroup label="Zuid-Holland">
<option value="denhaag">Den haag</option>
<option value="leiden">Leiden</option>
<option value="rotterdam">Rotterdam</option>
<option value="voorschoten">Voorschoten</option>
</optgroup>
</select>

<input type="submit" name="submit" value="Verzend" accesskey="v" />
</form>
...

Voorbeeld: http://jerseyboy.je.funpic.de/formulieren/formulier4.html

Aantal velden
Als internetter vindt ik het persoonlijk niet erg fijn dat als je je registreert er ellenlange formulieren ingevuld moeten worden. Ik weet zeker dat er vele internetters zijn die het met mij eens zijn...
De oplossing van deze tijdverspilling (zoals sommige dat zien) is om simpelweg zo min mogelijk velden te laten invullen. Informatie als adres, postcode en telefoonnummer zijn bijvoorbeeld helemaal niet nodig voor een forum-registratie... Denk daar goed aan, en vul zelf ook 'ns je gegevens in. Als je te veel velden hebt, zul je merken dat je het niet fijn vindt...
Als je toch per se veel velden moet laten invullen, kun je het formulier opdelen in pagina's. Dit kan heel gemakkelijk met PHP:

<?php
if ($_GET['deel'] == 1) {
// Dit is de 'verwerkpagina', er is dus net een formulier ingevuld (deel 1)
$username = strip_tags(htmlentities($_POST['username'])):
$password = strip_tags(htmlentities($_POPST['password']));
$password2 = strip_tags(htmlentities($_POST['password2']));

if ($password != $password2) {
echo '<p class="fout">Je wachtwoorden komen niet overeen!</p>';
}
else {
// Verdere verwerking van de gegevens
...
// Formulier deel 2 tonen
echo '<form action="formulier.php?deel=2" method="post">';
}
}
?>

Het klopt dat dit scriptje niet optimaal (lees: slecht) controleert, maar dat doet er niet toe...

Duidelijke foutmeldingen
Het is belangrijk dat je duidelijke foutmeldingen geeft. De herkenbaarste kleur voor een foutmelding is rood. Zoals je ziet in mijn voorbeeld hierboven ook met een 'duidelijke' foutmelding... (vage zin...)
Het meest handig zou zijn om de foutmelding boven of naast het veld weer te geven (of er zelfs in).