4.1.7 Ieder formulier heeft een zichtbare verzendknop

Ieder formulier moet een zichtbare verzendknop bevatten die bezoekers zowel met het toetsenbord als met de muis kunnen activeren.

Enkele voorbeeldsituaties:

  • Keuzelijsten die gebruikmaken van een onchange-event (zoals in onderstaand voorbeeld) zijn problematisch voor wie met het toetsenbord navigeert. De actie die aan het event gekoppeld is (het laden van een nieuwe pagina), wordt in een aantal browsers al bij de eerste toetsaanslag uitgevoerd. Hierdoor is het niet mogelijk om de volledige lijst te doorlopen met de pijltjestoetsen. Het toevoegen van een verzendknop (en het weghalen van de events) is een afdoende oplossing voor dit probleem.
  • Omdat de meeste formulieren ook verstuurd kunnen worden met de entertoets op het toetsenbord, wordt de verzendknop soms weggelaten om plaats te besparen. Dat komt het vaakst voor bij de zoekfunctie. Voor bezoekers die het toetsenbord niet (kunnen) gebruiken en een alternatief aanwijsapparaat gebruiken is dit problematisch.

Voorbeelden

Traditioneel 'jump menu' (niet goed)

screenshot jumpmenu zonder verzendknop

<label for="taal">Kies uw taal</label>
<select onchange="parent.location=this.value" id="taal">
  <option value="index_nl.html">Nederlands</option>
  <option value="index_fr.html">Frans</option>
  <option value="index_en.html">Engels</option>
</select>

Keuzelijst met verzendknop (goed)

screenshot jumpmenu met verzendknop

<form action="...">
  <label for="taal2">Kies uw taal</label>
  <select id="taal2">
    <option value="index_nl.html">Nederlands</option>
    <option value="index_fr.html">Frans</option>
    <option value="index_en.html">Engels</option>
  </select>
  <input type="submit" value="Kies" />
</form>

Merk op: in het voorbeeld 'Keuzelijst met verzendknop' wordt het formulier daadwerkelijk verstuurd en moet het script server-sided zorgen voor het doorsturen naar de juiste pagina. Met behulp van JavaScript kan de verzendactie van het formulier eventueel onderschept worden en kan het doorsturen alsnog client-sided gebeuren.

Formulier zonder verzendknop (niet goed)

screenshot zoekveld met vooraf ingevulde tekst

<form>
  <input type="text" value="zoeken..." id="zoek2" name="zoek" />
</form>

Formulier met verzendknop (goed)

screenshot zoekveld met verzendknop

<form>
  <input type="text" value="" id="zoek" name="zoek" />
  <input type="submit" value="Zoeken" />
</form>

Opmerkingen

  • Het is niet aangeraden om een Reset-knop (<input type="reset" /> toe te voegen aan een formulier. Deze zorgt vaak voor frustraties bij gebruikers die er per ongeluk op drukken.
  • Naast <input type="submit" /> is het ook mogelijk om een afbeelding te gebruiken voor de verzendknop. Vergeet in dit geval het alt-attribuut niet.
<input type="image" src="submit.png" alt="Verstuur" />

Zelf testen

Ga na of elk formulier een verzendknop heeft.
Kijk ook of de knop bruikbaar met het toetsenbord is.

  • Ja; dan is aan dit ijkpunt voldaan.
  • Nee; pas uw website aan.