website stats » La propiedad tabindex | Solo Código |

La propiedad tabindex

Escrito por J.F. el Viernes, 19 de Octubre del 2007 a las 15:06

Vamos a hablar en ésta ocasión de una propiedad pensada para mejorar la accesibilidad en páginas web, enfocada a optimizar la navegación por medio del teclado. Para ello se utiliza la propiedad tabindex, que es aceptada por los siguientes elementos: <a>, <area>, <button>, <input>, <object>, <select> y por último <textarea>. De ésta manera al situarnos sobre uno de los elementos, cuando pulsemos tabulador, irá al siguiente elemento según la numeración dada en tabindex. Para usar ésta propiedad simplemente debemos declararla asignándole un número, y los saltos se realizarán siguiendo el orden de los números. Muy útil para aplicaciones web en las que el usuario haga manejo de muchos campos, y utilice tabulador para ir pasando de uno a otro. Aquí va un sencillo ejemplo:

HTML:
  1. Campo 1:
  2. <input type="text" name="campo1" tabindex="1"/>
  3. Campo 2:
  4. <input type="text" name="campo2" tabindex="4"/>
  5. Campo 3:
  6. <input type="text" name="campo3" tabindex="3"/>
  7. Campo 4:
  8. <input type="text" name="campo4" tabindex="2"/>
  9. <input type="submit" value="Fin" tabindex="5"/>
  10. </body>

Categoria: HTML, General

5 Comentarios

Entradas relacionadas


Comentario de Fernando

Realizado el Martes, 16 de Septiembre del 2008 a las 19:16

Buen aporte me salvo de una dificulta ni la hp.

Gracias

Comentario de mario

Realizado el Viernes, 19 de Diciembre del 2008 a las 17:29

explicacion simple, pero efectiva, gracias

Comentario de Pablo [ Yeap directory ]

Realizado el Jueves, 15 de Enero del 2009 a las 23:24

Muchas gracias por ilustrar el tema del TABINDEX, estaba haciendo una clase para formularios y necesitaba saber que elementos la utilizaban :) // salu2!

Comentario de J.F.

Realizado el Lunes, 2 de Marzo del 2009 a las 14:14

De nada, es fácil explicado, pero no es muy conocido :P

Comentario de Janckos

Realizado el Miércoles, 6 de Mayo del 2009 a las 17:15

buena explicaicon =D

Escribir un comentario

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |