Siete trucos/consejos para crear formularios Web

Leo algunos blogs en inglés, entre ellos (recientemente) CSS-Tricks y hoy encontré un artículo que me pareció interesante el cual he hecho una traducción libre para compartirlo con ustedes.

Se trata de todo un tema, los formularios web. Son siete trucos/consejos de van desde porqué usar etiquetas (labels) hasta soluciones prefabricadas.

Siete trucos/consejos para formularios web:

Use etiquetas (labels);
Aplique float a las etiquetas (labels);
No arruine los estilos por defecto;
Use la pseudo clase :focus;
Rellene los campos de entrada, pero manténgalos claros;
Haga que funcione con Web Form Factory;
Considere una solución prefabricada.

1. Use etiquetas (labels): no se necesitan ninguna etiqueta para que el formularios funcione, pero esto es un crimen a la accesibilidad del mismo no usarlas. Las etiquetas son las que le dan significado a lo que se está ingresando. El uso de esta no solo es semánticamente correcto sino que además le da la oportunidad de aplicarle estilo con CSS.

2. Aplique float a las etiquetas (labels): con esto consigue una apariencia como si usara tablas. Solo defina un ancho (width) estático, flotelo a la izquierda (float: left;) alinee el texto a la derecha (text-align: right;) y defínale algunos right-marging.

3. No arruine los estilos por defecto: muchos navegadores tienen estilos por defecto para los botones de entrada (input buttons), esto provee una agradable y consistente experiencia al usuario, entonces si elige interferir con esto, asegúrese que tiene una buena razón. Una forma común de terminar con esto es usando una técnica de reinicio por CSS (CSS reset) que incluye algo así como: border: none;. Esto puede ser bonito para prevenir bordes no deseados pero también rompe con el estilo por defecto en los inputs buttons en Firefox. Algunos navegadores son más fuertes y algunos son todavía más difíciles de cambiar (Safari)

4. Use la pseudo clase :focus: puede aplicar estilo a los campos de entrada de datos (input data) y a las áreas de texto (text areas) para que solo tengan efecto cuando el usuario ha hecho click en esta área usando la pseudo clase :focus.

Por ejemplo podría cambiar los bordes con algo como:

textarea:focus, input:focus {border: 2px solid #900;}

La mayoría de los navegadores los soportan así que se vería algo así:

6. Rellene los campos de entrada, pero manténgalos claros: puede resultar muy útil rellenar los campos y las áreas de texto (text areas) de antemano. Por ejemplo si tiene un campo de contacto y este está etiquetado como Mensaje, podría rellenarlo con algo como: sus comentarios positivos o críticas constructivas aquí.

<textarea name="Message" rows="20" cols="20">Hint goes here.</textarea>

Pero si te paras aquí, el usuarios necesitará borrar todo esto manualmente y eso no es bueno. Para eso puedes agregar un pequeño Javascript para borrar esto en el momento que se hace click.

<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Hint goes here.</textarea>

Este pequeño snippet permite que esto ocurra solo una vez, evitando así que se borren los datos ya escritos.

6. Haga que funcione con Web Form Factory: los formularios no solo deben verse bonitos, ellos necesitan funcionar. Hay dos funciones primarias que un formulario web debe tener: interactuar con un base de datos o generar un correo electrónico. Web Form Factory es un servicio código abierto (open source) el cuál toma el formulario y genera el código necesario para que este haga todo que tiene que hacer.

7. Considere una solución prefabricada: esta es una opción que puede usar Nice & Simple Contact Form.

Igualmente buscando encontrarás cientos de ejemplos, códigos y bibliotecas listas para usar.