Klikom na tipku TAB fokus prelazi na polja formulara onim redom kojim se polja pojavljuju unutar HTML-a. Međutim, ponekad želimo da taj poredak bude drugačiji i da se fokus stavlja na polja onim redom kojim mi to želimo.

Rješenje:

Upotreba tabindex atributa na elementu.
Primjer:

<input type="text" name="polje1" tabindex=1 />
<input type="text" name="polje2" tabindex=2 />
<input type="text" name="polje3" tabindex=0 />
<input type="text" name="polje4" tabindex=3 />

Dodavanjem atributa tabindex svakom elementu fokus se stavlja na elemente od najmanjeg tabindexa prema najvećem. Polja označena tabindexom -1 (tabindex=”-1″) bit će preskočena. Polja označena istim tabindexom bit će fokusirana onim redom kojim se pojavljuju unutar HTML-a.

Skrivena polja ne reagiraju na TAB pa njih niti ne treba označavati tabindexom. Isto vrijedi i za polja koja imaju atribut disabled.

Osim na input polja tabindex može se primijeniti i na <a>, <textarea>, <select> i <button> elemente.

Osim navedenog tabindexom je moguće obuhvatiti i druge elemente (npr. h1 ili option unutar liste) na način da im se dodijeli tabindex nula (tabindex=”0″).

Detaljnije o tabindex atributu: http://reference.sitepoint.com/html/a/tabindex