• Publicidad
  • Contacto
Pixelco Tech Blog
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech Blog
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech Blog
Sin resultados
Ver todos los resultados

Siete trucos/consejos para crear formularios Web

Diego CambiasoporDiego Cambiaso
11/11/2007
enDesarrollo/programación, Diseño, Recursos
Tiempo de lectura5 minutos
0

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:

EntradasRelacionados

4 Tips de Oracle para iniciarte en el mundo de la programación

Ventajas, desventajas y consejos al crear tu sitio 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:

  • 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

Tags: CSSCSSDesarrolloDiseñoPHPPHPRecursos
Diego Cambiaso

Diego Cambiaso

Comunicador Social y Desarrollador de Software. Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

RelacionadoEntradas

Las Smart Cities y sus conexiones

21/08/2021

Así beneficia el avance de las Smart Cities a los pagos en línea

13/08/2021

La IA está cambiando la forma en que se crea software

08/06/2021
Microsoft Teams - Interface

Microsoft Teams disponible para usuarios de Office 365 en el mundo

20/03/2017

Moto Edge 30 Pro ¿Qué tan bueno es? VIDEO

02/07/2022

Serie Camon 19 – Conoce los detalles de los nuevos equipos de Tecno Mobile

01/07/2022

Una mujer supera su propio récord y calcula el valor del “Número Pi” en 100 billones de dígitos

12/06/2022

TECNO POVA 3 características y especificaciones

11/06/2022

Tecno Camon 19 Series lanzamiento global el 14 de junio

09/06/2022

Todo lo que debes saber para comenzar a utilizar la inteligencia artificial en tu negocio

31/05/2022
Pixelco Tech News Pride 2022 logo
Pixelco Tech News Pride 2022

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Buscar

Sin resultados
Ver todos los resultados

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.