18 - Formulario - tabindex
Todos los controles de formulario pueden definir una propiedad llamada tabindex que es un valor entero entre 0 y 32767. Este número indica el orden en que los controles toman foco. Cuando se presiona la tecla tab el navegador pasa el foco al siguiente control.
Para probar el funcionamiento implementaremos un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. Haremos que el foco sea por columna, es decir primero tomará foco el text de la primer fila y primer columna, luego del text de la segunda fila y primer columna etc. (si no definimos la propiedad tabindex la carga de datos se efectua por fila):
<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
<meta charset="UTF-8">
</head>
<body>
<form action="registrardatos.php" method="post">
<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7">
<br>
<input type="text" name="text4" size="5" tabindex="2">
<input type="text" name="text5" size="5" tabindex="5">
<input type="text" name="text6" size="5" tabindex="8">
<br>
<input type="text" name="text7" size="5" tabindex="3">
<input type="text" name="text8" size="5" tabindex="6">
<input type="text" name="text9" size="5" tabindex="9">
<br>
<input type="submit" value="enviar" tabindex="10">
</form>
</body>
</html> El resultado en el navegador es:
Como podemos observar los valores definidos para la propiedad tabindex para la primer fila de controles text es:
<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7"> Podemos observar que la propiedad tabindex no tiene valores consecutivos. Pero si vemos los text por columna podremos observar que si van en forma secuencial.
Todos los controles de formularios pueden definir la propiedad tabindex para indicar el orden de activación o foco del control.