Focus volgorde veranderen met <tabindex>

In een formulier kun je van het ene veld naar het andere springen met de TAB-toets. De volgorde waarin dat gebeurt wordt bepaald door de volgorde waarin je de afzonderlijke formulier-elementen in de HTML-code hebt opgegeven. Meestal is dat voldoende. Er zijn echter situaties denkbaar waarin je die volgorde zou willen doorbreken. Op deze bladzijde wordt beschreven hoe je dat aanpakt, zonder dat je de hele opzet van het formulier moet veranderen.

Eerst een voorbeeld om aan te geven wat er precies gebeurt. Hier onder staan twee schijnbaar gelijke formulieren.
Het linker formulier is op de "normale" manier opgezet. Als je in veld 1 klikt en daarna op de TAB-toets drukt, ga je van beneden naar boven door het formulier heen. De elementen krijgen de focus in de volgorde dus 1-2-3-4-5-6.
In het rechter formulier is de focus-volgorde veranderd. Als je in veld 1 klikt en daarna op de TAB-toets drukt, ga je ook door het formulier heen, maar nu in de volgorde 1-3-5-2-4-6.

• Het effect in het rechter voorbeeld bereik je door het attribuut tabindex="waarde" op te nemen in de formulier-elementen.
• Als waarde mag een positief of negatief geheel getal worden gebruikt.
• De code van het formulier rechts luidt:

  <form>
  <b>1</b>&nbsp;<input type="text" name="R1" tabindex="1"><br>
  <b>2</b>&nbsp;<input type="text" name="R2" tabindex="4"><br>
  <b>3</b>&nbsp;<input type="text" name="R3" tabindex="2"><br>
  <b>4</b>&nbsp;<input type="text" name="R4" tabindex="5"><br>
  &nbsp;<br>
  <b>5</b>&nbsp;<input type="submit" name="R5" value="OK" tabindex="3">
  <b>6</b>&nbsp;<input type="reset" name="L6" value="Overnieuw" tabindex="6">
  </form>
  

  In het formulier links zijn de attributen tabindex afwezig. De code is verder precies hetzelfde.
   
• Als je met de TAB-toets door een formulier heen loopt, zal blijken dat ook andere elementen van de browser en de pagina actief kunnen worden gemaakt. Dit geldt in elk geval bij hyperlinks en objecten zoals video-filmpjes. Verder kun je het hele document activeren met de TAB-toets en kun je door de afzonderlijke documenten in een frame-set en de adres-balk van je browser heen stappen.
• Elementen die een tabindex hebben worden van laag naar hoog doorlopen, dus 1, 2, 3, 4, enz. De nummering hoeft niet aansluitend te zijn.
• Elementen die een tabindex hebben worden het eerst behandeld. Pas daarna volgt de rest, in de volgorde waarin de elementen in het document zijn geplaatst.
• Als je een element een tabindex meegeeft met een waarde kleiner dan nul wordt dat element uit de focus-volgorde gehaald; je kunt het dan niet meer met de TAB-toets actief maken. Met een muis-klik lukt het natuurlijk altijd.

Opmerking:
 
Als de de formulier-elementen in omgekeerde volgorde wilt langslopen doe je dat met SHIFT+TAB.