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.
Fuente: CSS-Tricks
Otros recursos:
- Web Form Factory – Generador de código backend de formularios
- Simple CSS – Aplicación multiplataforma gratis para crear CSS
- phpForm – Creando formularios en tres simples pasos
- JSValidate – Biblioteca Javascript para validar formularios
- LiveValidation – Biblioteca Javascript para validar formularios
- Herramientas para crear formularios web
- Form Site – La herramienta más completa
Otras lecturas:
- Seis manuales en línea gratis para desarrollo web
- Dos herrramientas para trabajar con formularios
- Tutoriales para hacer formularios
- Dando formato a formularios
Tags: consejos, crear, formularios, web
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.
jejeje aver ciempre quice provar esto!
Me ha venido de maravilla esta información…
gracias
no le entiendo al codigo html
Buenas, la pseudo clase FOCUS no la soporta LOS PRINCIPALES NAVEGADORES. Solo firefox, aunque Explorer sea una autentica basura está considerado como unos de los principales (algún capullo pensó eso y lo dijo), pero es así.
Se puede hacer algo para que funcione perfectamente en Explorer?
Pd:Me refiero al paso 4.
Saludos
Como hago un formulario como este, donde cuando alguien lo complete aparezca lo escrito arriba?
por favor resp a mi mail
mae yo quiero borrar el texto q por defecto le ponemos a veces al textare …quiero borrar con solo darle click es facil para el pero para textare no es tan facil sabes como hacerlo…
esta muy bien
Muy buenos los tips, aunque difiero un poco de los ultimos dos, como desarrollador, la idea es hacer uno el backend del formulario y uno trabajar con el codigo, ademas que sacas de dar los primeros tips, si al final le dices que ocupe un programa que hace todo lo que le dijiste, de manera automatica. Es un poco fomentando la flojera, que de eso ya hay mucho.
Saludos