Cómo domesticar formas en el diseño web
Los formularios a menudo se consideran uno de los elementos HTML más dolorosos para programar. Pero el diseño y desarrollo de formas ha progresado a pasos agigantados; no es tan difícil como lo era antes.
Dicho esto, aunque la industria ha progresado enormemente, todavía existen algunos obstáculos. Al final, es posible domar las formas; solo requiere un poco de trabajo.
En esta publicación, echaremos un vistazo a algunos de los controles de formulario más utilizados y a diferentes herramientas y complementos que deberían ayudarlo con la implementación de formularios en sus sitios web.
Si tiene otros consejos o enlaces a otros recursos útiles, siéntase libre de publicarlos en los comentarios.
Rompiendo los controles
Comencemos por dividirlos en dos segmentos, porque algunos controles de formulario nunca han sido demasiado problemáticos para trabajar.
Controles amigables
Los controles con los que es más fácil trabajar son el cuadro de entrada básico, el área de texto y el botón. Funcionan bien con CSS estándar y, afortunadamente, son los elementos de formulario más comunes. Si no necesita usar los más difíciles, entonces tiene suerte.
Con el progreso de las esquinas redondeadas CSS3, las sombras paralelas y los degradados, muchos de los estilos más comunes son ahora aún más fáciles. No tienes nada que temer con estos controles.
Controles problemáticos
Ciertos controles de otra forma pueden ser un dolor masivo en el cuello. Por ejemplo, si diseña un control desplegable extremadamente estilizado, es probable que el desarrollador quiera conversar con usted. Sus opciones para el diseño serán bastante limitadas: color del borde, relleno, color de fondo, ese tipo de cosas. Si necesita más estilo que este, le sugiero que consulte con el desarrollador para asegurarse de que no está creando un problema importante para ellos.
Los controles de forma problemáticos incluyen:
- seleccionar múltiples,
- seleccionar desplegable,
- casillas de verificación,
- botones de radio,
- Subir archivo.
Herramientas modernas para formularios
Como se mencionó, existen varias herramientas increíbles disponibles para ayudarte a adaptar los controles de forma a tu forma.
Formalizar es tu arma secreta para obtener controles y estilos de forma básicos para que se comporten de manera consistente en todos los navegadores. Y sus estilos predeterminados son limpios y hermosos. Esta impresionante biblioteca también funciona perfectamente con una amplia gama de bibliotecas de JavaScript, como jQuery , Dojo y MooTools .
Reemplazo de control de formulario
Si desea hacer algunas cosas radicales a un formulario, hay herramientas útiles disponibles. Una táctica brillante para domesticar formularios web es ocultar el control real y reemplazarlo por completo con uno fabricado. Esto le da un control mucho mayor sobre cómo se renderiza la forma.
Un gran ejemplo de esto es Uniforme , un complemento jQuery para crear formularios ingeniosos. Viene en tres temas diferentes. Y si desea crear un tema personalizado, solo use el servicio Generador de CSS para desollar fácilmente el complemento.
Otro complemento de jQuery Niceforms . Si bien no tiene la práctica funcionalidad de volver a aplicar la piel de Uniform, sí ofrece un estilo básico que muy bien podría adaptarse a sus necesidades.
Finalmente, está la extensión jQuery comercial Wijmo . El módulo que nos interesa aquí es el forma decorador , que en realidad es de uso gratuito. Aborda algunos de los controles más problemáticos: casillas de verificación, botones de opción y menús desplegables. Siendo parte de una biblioteca comercial más grande, esta herramienta trae algunos beneficios, los más importantes son fuertes documentación y pagado apoyo . Finalmente, me encanta la forma en que maneja el desollado; usa el jQuery UI ThemeRoller , haciendo un trabajo fácil de diseños personalizados.
Controles de formularios inventados
Finalmente, si no hay un control de formulario que haga lo que necesita, ¡podría inventar uno! Algunas personas muy inteligentes ya han hecho mucho de esto, y quizás una de sus herramientas ya se ajuste a sus necesidades.
Controles deslizantes
Una cosa que falta en HTML estándar (pero es parte de HTML5) es un control deslizante básico. Hay muchas respuestas a esto, incluyendo uno de Wijmo , que se basa en Control deslizante jQuery UI .
Uploaders
Si bien puede utilizar el control de entrada de archivos para permitir que los usuarios seleccionen un archivo para cargar, es posible que desee algo un poco más elegante, especialmente si las cargas de archivos son críticas para su sitio web. Una de las mejores soluciones es Uploadify . Permite a los usuarios seleccionar varios archivos y ver el progreso. Viene con una variedad de opciones de diseño y funcionalidad.
Casillas de verificación y botones de selección estilo deslizante
Un elemento popular de UI (gracias al iPhone) es el interruptor de encendido / apagado que se desliza de un lado a otro. Con este útil complemento jQuery , puede transformar una casilla de verificación básica o un botón de radio en uno. Ya sea que llame a esto un control de formulario inventado o una herramienta de reemplazo de formulario, es una gran manera de permitir que los usuarios activen y desactiven las opciones.
Botones creativos
jQuery UI es otra visión interesante de los controles básicos. Lo que etiqueta como botones también se podría usar para hacer conjuntos de opciones basados en botones, botones de radio y casillas de verificación. Al hacerlo, transforma estos controles en una forma visual diferente. En la imagen siguiente hay un conjunto de botones de radio con el estilo de una fila de botones.
Formularios HTML5
HTML5 ha traído muchas posibilidades interesantes a los formularios web. Si bien está fuera del alcance de este artículo, sigue siendo relevante. Estos son algunos recursos clave para ayudarlo a profundizar:
- " Una forma de locura , "Inmersión en HTML5;
- " Diversión con formularios HTML5 , "Richard Shepherd;
- " Formularios HTML5 "Wufoo;
- " Tener un día de campo con formularios HTML5 , "Inayaili de León.
En conclusión, los controles de forma son uno de los obstáculos más críticos para desarrollar un sitio web básico.
Un diseñador que comprende las limitaciones, conoce las herramientas y reconoce las oportunidades para ajustes fáciles podrá tomar decisiones informadas que, en última instancia, mejorarán los resultados.