Formulario de contacto (I)
En esta serie de post vamos a desarrollar de principio a fin un formulario de contacto tipo, para nuestra web.
En un principio no parece un proyecto de gran envergadura, pero seguro que podemos sacarle algo de punta al asunto.
La idea es conseguir un formulario tipo, accesible, usable y si es posible bonito.
El marcado
Vamos a usar una lista no ordenada para contener los distintos "items" de nuestro formularios.
Para no extender mucho la cosa, pediremos simplemente un nombre, un mail y el cuerpo del mensaje:
-
<form action="#" method="post">
-
<input type="text" name="nombre" id="nombre" value="" />
-
</li>
-
<input type="text" name="mail" id="mail" value="" />
-
</li>
-
<textarea id="mensaje" name="mensaje" rows="8" cols="40"></textarea>
-
</li>
-
<input name="enviar" type="submit" value="enviar" />
-
</li>
-
</ul>
-
</form>
Pulsa para ver el paso 1
Esto es un formulario, simple, muy simple y lo unico reseñable es el cierre de las etiquetas input con ' />' si queremos que valide en Transitional y poco más.
Usabilidad
1. Etiquetas
Bien, vamos a intentar mejorar un poco la experiencia de nuestro usuario, de momento sin usar javascipt, ya que si queremos que ademas de usable, nuestro formulario sea accesible, tenemos que trabajar con minimos. Por ahora pensaremos en un visitante sin javascript habilitado en su navegador, a ver que podemos hacer por él.
El primer paso para conseguir un formulario usable es el que estas pensando.
Si, lo menos que puedo hacer por mi visitante es que sepa a que corresponde cada cajita de texto ¿verdad?
Para ello vamos a usar la etiqueta
Mejor con un ejemplito:
De esta forma, cuando el usuario haga click en el label, el control que tenga id="nombre", recibirá el foco.
Pulsa para ver como queda el paso 2
2. TabIndex
Muchos de nosotros estamos acostumbrados a usar el tabulador para pasar de un control a otro, sin perder esos segundos tan preciosos que tardamos en pillar el ratón. Bien, aseguremonos de que esto tambien es posible en nuestra web.
Es fácil, simplemente tenemos que añadir el atributo tabindex a cada uno de los controles, asignadoles el orden deseado.
Así es como queda el paso 3
3. Atajos de teclado
El atributo accesskey permite asignar a cada control un método abreviado con el teclado, de forma que mediante una combinación de teclas del tipo ALT + n, podemos mover el foco de un control a otro sin despegar las manos del teclado.
Añado los atajos de teclado: Alt + n (nombre), Alt + mail (e), Alt + m (mensaje), Alt + e (enviar), y así queda el paso 4
4. Extras
Nunca a nadie le ha molestado un poco de ayuda, asi que vamos a informar un poco a nuestro visitante para que sirve cada cosa, añadiendo textos explicativos.
Dado que los campos nombre y e-mail serár obligatorios, no viene de más añadir un pequeño asterisco que los identifique.
Sin complicar más la cosa, aqui tenemos como quedaría el paso 5
El resultado hasta ahora es un formulario bastante usable, y bastante feo tambien.
En el próximo post trataremos de mejorar un poco su aspecto mediante CSS.
Comentarios
[…] En el anterior post dejamos nuestro formulario “en los huesos”, funcional pero feo, muy feo. […]
30 Agosto 2006 el plan seldon — Formulario de contacto (II)