Θα παρατηρήσετε ότι όταν βλέπετε μια ιστοσελίδα με τον web browser σας και πατήσετε το κουμπί Tab, τότε θα επιλεγεί ένα ενεργό (active) στοιχείο (κάποιο link ή κάποιο στοιχείο μιας φόρμας). Αν το πατήσετε και δεύτερη φορά τότε θα επιλεγεί το αμέσως επόμενο ενεργό στοιχείο με βάση την θέση του στην σελίδα.

Κάποιοι αυτήν την λειτουργία θέλουν να την ελέγχουν, δηλαδή να καθορίζουν ποιο ενεργό στοιχείο θα επιλεγεί με το πρώτο πάτημα του κουμπιού Tab, ποιο με το δεύτερο κ.ο.κ. Αυτό κάνει η ιδιότητα tabindex. Η τιμή που παίρνει είναι ένας ακέραιος αριθμός (>0) ο οποίος αντιστοιχεί ένα στοιχείο της σελίδας με τον αριθμό των πατημάτων του κουμπιού Tab

Παράδειγμα

Η ιδιότητα tabindex
<table width="27%" border="0" bgcolor="#FFCC00">
<tr>
<td width="75%"><a xhref="http://localhost/#" tabindex="4">Tab-4</a></td>
</tr>
<tr>
<td><input type="text" name="textfield" tabindex="2" value="Tab-2"></td>
</tr>
<tr>
<td><a xhref="http://localhost/#" tabindex="3">Tab-3</a></td>
</tr>
<tr>
<td><a xhref="http://localhost/#" tabindex="5">Tab-5</a></td>
</tr>
<tr>
<td><textarea name="textarea" cols="20" rows="4" tabindex="1">Tab-1</textarea></td>
</tr>
</table>

Πατήστε το Tab και δείτε παρακάτω ποιο στοιχείο επιλέγεται κάθε φορά που το πατάτε

Αποτέλεσμα στον browser:

 

Tab-4
Tab-3
Tab-5
Tab-1
Tab-2
Pin It