Tabindex – kontrola tab poretka form elemenata unutar HTML-a
Problem:
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