Siete trucos/consejos para crear formularios Web



nice-formLeo 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:

  1. Use etiquetas (labels);
  2. Aplique float a las etiquetas (labels);
  3. No arruine los estilos por defecto;
  4. Use la pseudo clase :focus;
  5. Rellene los campos de entrada, pero manténgalos claros;
  6. Haga que funcione con Web Form Factory;
  7. 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í:
formulario
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.

wufoo

Fuente: CSS-Tricks

Otros recursos:

Otras lecturas:

Tags: , , ,

Related Posts Plugin for WordPress, Blogger...


Desarrollador de software egresado de la Universidad Católica de Argentina, blogger y fotógrafo.

11 Respuestas a “Siete trucos/consejos para crear formularios Web”

  1. Hugo

    oct 24. 2010

    necesito saber como introduzco un formulario de manera tal que la gente me deje sus datos y estos alimenten una base de datos confeccionada en Acces.
    Estos datos los guardaria en dicha base de datos que por supuesto esta en mi disco rigido.
    Me dedico a recucltar personas para que participen de encuestas en lo que se llama focus grup (grupos de discucion) que es una actividad realcionada, o digamos que es una herramienta para trabajar marketing.
    Les agradeceria esta informacion asi tambien como cualquier otro consejo para construir una pagina web donde iria este formulario.
    consejos como direccionamiento, contratacion de un servidor, posicionamiento en los buscadores, obtencion de dominios etc.
    muchisimas gracias.

  2. andres

    dic 04. 2009

    jejeje aver ciempre quice provar esto!

  3. davicine

    oct 07. 2009

    Me ha venido de maravilla esta información…

    gracias

Trackbacks/Pingbacks

  1. Consejos para crear formularios Web | Manuales gratis - 29/04/2010

    […] estilos por defecto. Use la pseudo clase. Rellene los campos de entrada, pero manténgalos claros. Descargar este archivo Reportar recurso Procesando el […]

  2. Recursos y Tutoriales » Blog Archive » Herramientas para testear webs - 28/02/2008

    […] Siete trucos/consejos para crear formularios Web […]

Comentario