SexyForms - Script para aplicar skin o temas para modificar la apariencia de tus formularios web.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

SexyForms es una excelente opción gratuita y de código abierto para poder aplicar skins a tus formularios web.

Con este script es posible modificar completamente el estilo y apariencia de los elementos de los formularios mediante temas o skins, incluso crear nuestros propios diseños, si es que no nos gustan los estilos que ya trae el ejemplo para descargar.

A continuación puedes ver como son los estilos visuales de los formularios y también un simple manual para instalar y configurarlo en tu página web.

Mas información sobre el programa.

Indice - Contenido

  1. Elementos de formulario que permite modificar la apariencia.
  2. Temas o skins que se pueden aplicar:
    1. Estilo Windows Vista.
    2. Estilo oscuro ( Dark )
    3. Estilo verde ( Green )
    4. Estilo rojo ( Red )
  3. Otras características y opciones.
  4. Instalar el script y aplicar los estilos.
    1. Incluir archivos javascript y CSS en la página web.
    2. Inicializar el script.
    3. Definir el atributo Class para Aplicar el tema.
    4. Colocar imagen de ícono a botón o campo de texto.
  5. Licencia.
  6. Navegadores web compatibles.

 

1 - Elementos de formulario que permite modificar la apariencia.

Puedes modificar los siguientes elementos y controles:

  • Botones
  • Cajas de texto.
  • DropDown o Listas desplegables
  • Checkbox o cajas de verificación.
  • Radiobuttons o botones de opción.

También permite el uso de imágenes junto a los controles, por ejemplo colocar un ícono para el botón, para una caja de texto.

2 - Temas o skins que se pueden aplicar:

En total contiene unos 9 temas, además utilizando otros esquemas de colores: Rojo, azul, naranja, para poder adaptarlos lo mejor posible al diseño de nuestro sitio web.

La lista de temas completa la puedes ver en el demo incluida en la descarga ( fichero index.html ). A continuación puedes ver tres motivos.

2.1 - Windows Vista

2.2 - Estilo oscuro o Dark.

2.3 - Tema de color verde.

2.4 - Skin color rojo.

3 - Otras características y opciones.

En el formulario de demostración que lo puedes ver abriendo el archivo index.html, se muestra como:

  • Poder implementar un formulario para entrada de contraseña colocando un icono en el textarea
  • Habilitar y deshabilitar controles
  • Utilizar un formulario de upload de archivos
  • Colocar una imagen en un control Button o botón.
  • Y para un formulario de envío de comentarios, entre otros.

También, permite moverse por los elementos del formulario mediante el teclado, descargar los archivos PSD utilizados para cada skin entre otros. ( Los archivos PSD utilizados para cada tema o skin lo puedes descargar en este enlace.)

Nota: Si quieres ver una lista comparativa de sexyforms con otras librerías como por ejemplo Nice Forms y JQuery NiceForm, a continuación se visualiza una tabla con las características de cada una de ellas:

4 - Instalar el script y aplicar los estilos.

En este apartado puedes ver los pasos necesarios para aplicar los temas y skins a tus formularios.

4.1 - Incluir archivos javascript y CSS en la página web.

Como primer paso es necesario colocar en la sección HEAD de la página, la referencia a dos archivos Javascript. Estos archivos son los siguientes: mootools-yui-compressed.js y sexyforms.v1.3.mootools.js.

También incluir el archivo de hoja de estilo CSS que será el que define el estilo a utilizar, por ejemplo si se quiere utilizar el skin de Vista, se debe añadir la referencia al archivo sexyforms-vista.css, ubicado en la carpeta sexyforms\vista, si queremos establecer el tema Azul, hacer referencia al CSS sexyforms-blue.css.

4.2 - Inicializar el script.

Por último, en la sección HEAD del código HTML, se debe colocar un pequeño SCRIPT para inicializar el estilo del formulario.

Este fragmento de código lo que hace es buscar el formulario en cuestión ( Puede haber varios form en la página web ) para recorrer los elementos o controles y de esta manera asignarles el estilo a cada uno de ellos.

El código completo de la sección HEAD sería el siguiente:

4.3 - Definir el atributo Class para Aplicar el tema.

Para aplicar el tema, como paso final, deberás escribir en el atributo Class del formulario el valor que hayas definido en el script de inicialización anteriormente colocado en la sección HEAD, en este caso el valor es mi-formulario, por ejemplo:

4.4 - Colocar un ícono o imagen en los botones y campos de texto

Se debe agregar un atributo llamado Icon con la ruta del archivo PNG o GIF, por ejemplo para un botón

Lo mismo si se quiere colocar la imagen de ícono en un campo de texto.

5 - Licencia

Este script o programa es software libre distribuido bajo licencia MIT.

6 - Navegadores compatibles.

Una de las ventajas a comparación de otros ejemplos similares, es que funciona perfectamente con la mayoría de los navegadores webs de la actualidad, como es el caso de Mozilla FireFox, Google Chrome, Internet explorer, Opera ( incluyendo las últimas versiones )


Requerimientos de instalación y uso.

Requiere: Librería mootools

Videos tutoriales.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
Licencia:
Gratis - Open source - MIT
Versión:
--
Idioma:
Inglés
Programa actualizado:
25 NOV 2010


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: