Diseño web en Tlaquepaque
Diseño web en Tlaquepaque Formularios Esta sección trata de la accesibilidad de los formularios y los controles que se pueden poner dentro de un elemento FORM.
1.1 Acceso a los formularios mediante el teclado Puntos de verificación en esta sección:
9.4 Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos. [Prioridad 3]
9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario. [Prioridad 3]
En el ejemplo siguiente, especificamos una secuencia de navegación con la tecla TAB entre elementos (en secuencia, «campo2», «campo1», «enviar») con «tabindex»: Ejemplo. <FORM action=»submit» method=»post»> <P> <INPUT tabindex=»2″ type=»text» name=»campo1″> <INPUT tabindex=»1″ type=»text» name=»campo2″> <INPUT tabindex=»3″ type=»submit» name=»enviar»> </FORM>diseño web en Jalisco
Este ejemplo asigna la letra «U» como tecla de acceso (con «accesskey»). Al teclear «U» el enfoque pasa a la etiqueta, que a su vez pasa el enfoque al control de entrada de texto, para permitir al usuario teclear el texto. Ejemplo. <FORM action=»submit» method=»post»> <P> <LABEL for=»usuario» accesskey=»U»>nombre</LABEL> <INPUT type=»text» id=»usuario»> </FORM> 11.2 Agrupar los controles dentro del formulario Puntos de verificación en esta sección: 12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2] Los diseñadores de contenidos deben agrupar la información donde esto sea natural y apropiado. Cuando los controles de formulario se pueden agrupar en unidades lógicas, utilice el elemento FIELDSET y aplique una etiqueta a esas unidades con el elemento LEGEND: Ejemplo diseño web
<FORM action=»http://ejemplo.com/nuevousuario» method=»post»> <FIELDSET> <LEGEND>Datos personales</LEGEND> <LABEL for=»nombre»>Nombre: </LABEL> <INPUT type=»text» id=»nombre» tabindex=»1″> <LABEL for=»apellidos»>Apellidos: </LABEL> <INPUT type=»text» id=»apellidos» tabindex=»2″> …mas datos personales… </FIELDSET> <FIELDSET> <LEGEND>Historial médico</LEGEND> …datos del historial médico… </FIELDSET> </FORM>Diseño web en Tlaquepaque