Formateo de formularios HTML accesibles
¿Continúa diseñando formularios HTML utilizando tablas? Te alegrará saber que hay una mejor manera de diseñar formularios. El HTML contiene elementos suficientes para permitirle diseñar formularios elegantes sin tener que recurrir al elemento de arreglo que se usa con frecuencia. Junto con los elementos de entrada habituales (entrada, selección, área de texto), también tiene los elementos de campo, etiqueta y leyenda. Al utilizar estos elementos, mejora la accesibilidad de sus formularios sin ningún esfuerzo adicional de su parte. Una palabra acerca de estos tres elementos a menudo deficientes …
El elemento fieldset es un contenedor estructural para elementos de formulario. Puedes usarlo para agrupar los elementos de tu formulario de forma lógica. Por ejemplo, para un formulario de comentarios, puede agrupar el nombre y la dirección de un usuario en un conjunto de campos, así como preguntas sobre cómo regresar a otro.
Al ser un elemento de nivel de bloque, el área de conjunto de campos se extiende por defecto al ancho completo de su contenedor. Al igual que con otros elementos, puede establecer su propiedad de ancho en un valor más apropiado.
Los navegadores generalmente dibujan un borde alrededor del elemento para mejorar su atractivo visual.
Es una buena práctica agregar un título a cada grupo de campos para explicar todo el grupo. Para hacer esto, usa el elemento de leyenda. Lo colocas inmediatamente después de la etiqueta de apertura del elemento fieldset. Si el elemento fieldset tiene un borde, la leyenda se colocará bien en el borde superior.
El elemento de etiqueta es un contenedor para la etiqueta asociada con un elemento de entrada. Puede asignar una etiqueta a un elemento de entrada de dos maneras:
- envuelva el elemento de entrada dentro del elemento de etiqueta Nombre:
- Use el atributo id para enlazar la etiqueta con el elemento de entrada con la ayuda de para = "inputElementId" Attribute
Nombre:
Puede usar el atributo para = "inputElementId" incluso para el primer método, pero este no es necesario Además, normalmente establece el nombre del elemento de entrada de la misma manera que su identificador (excepto las casillas de verificación y los botones de opción). Los hice diferentes aquí, solo para ilustrar. Es una buena idea usar siempre el elemento de etiqueta para ayudar a los usuarios a determinar el propósito del elemento de formulario.
Acerca del estilo de la forma
Los elementos de conjunto de campo, etiqueta y leyenda se pueden diseñar con CSS. Así es como puedes dar vida a tu forma. El formato del formulario es simple y puede verse así:
Acerca de usted
Su nombre
Su dirección de correo electrónico
Su nombre del modelo
sea:
fieldset {
border: 1px llano verde;
relleno-izquierda: 5px;
derecho de relleno: 5px;
margen: 5px;
}
etiqueta {
pantalla: bloque;
tamaño de letra: negrita;
}
leyenda {
color: verde;
}
Esto le da a cada grupo de campo un borde verde de 1px de ancho y un encabezado de grupo verde ("Acerca de usted"). La etiqueta (por ejemplo, "Correo electrónico") estará en negrita. La pantalla: "bloque" La regla obliga a los elementos de la etiqueta a mostrarse en líneas individuales.
Para obtener ejemplos más detallados del estilo de formulario, consulte el cuadro Recursos.
El atributo de la clave de acceso
Para permitir una fácil navegación a los elementos utilizando el teclado, HTML también define el atributo de la clave de acceso. Esto se usa para definir un solo carácter que se puede usar para enfocar el elemento o para activar un enlace. El estándar HTML 4 y la mayoría de los navegadores admiten el atributo para algunos elementos, incluidas las entradas y los cuadros de texto.
La clave para acceder es un poco embarazosa por varios motivos: consulte Uso de las claves de acceso: ¿merece la pena? y Los problemas de acceso clave persisten en Xhtml 2 para algunos debates sobre este tema. Para los usuarios de Firefox, puede encontrar interesante el hilo Firefox 2 y Accesskeys .
El problema con el lado de la clave de acceso, incluirlo en sus formularios es muy simple. Este es un ejemplo que define la letra "n" como un método abreviado de teclado para el elemento de entrada fname.
Para usar el acceso directo en Windows, generalmente debe presionar Alt + n para resaltar este elemento.