AddThis Social Bookmark Button

joi, august 16, 2007

Ordinea de navigare in forme - tab order cu tabindex

Pentru navigarea facila si introducerea cu usurinta a datelor intr-un formular web (<FORM>) este util ca elementele sa fie asezate ordinat si sa se poata sari de la unul la succesorul sau logic prin apasarea tastei Tab.
Tendinta naturala este de a insira elementele formularului de la stinga la dreapta si de sus in jos, sperind ca acestea se vor aseza de la sine si ordinea de navigare cu Tab va fi automat cea corecta. Dar elementele formularului pot fi pozitionate cu CSS sau tabele si atunci ordinea de afisare in pagina nu mai corespunde celei din cod, caz in care navigarea cu Tab este data peste cap.
Pentru specificarea ordinii de navigare se foloseste atributul HTML tabindex, ce se poate aplica urmatoarelor elemente: A, AREA, BUTTON, INPUT, OBJECT, SELECT si TEXTAREA, in urmatoarea structura:

<INPUT tabindex="1" type="text" name="edit1">

Pentru a vedea tabindex la lucru, pozitionati cursorul in caseta "1" din formularul de mai jos si priviti ordinea de navigare (ordinea definita cu tabindex corespunde valorilor din casete):











Niciun comentariu: