Sexy Forms

View this post in English

SexyForms es una librería javascript que se encarga de mejorar increíblemente la apariencia de los formularios XHTML. Es compatible con todos los navegadores modernos, y con Internet Explorer también. Es completamente no-intrusivo y permite crear tus propios estilos!


6, 7, 8
3.0, 3.5
3
9.64, 10
4

Demostración

Form ElementsSelectBox con Ajax

sexyforms-example

Características

tablita

Instalación

Se instala como cualquier script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>

<link type="text/css" rel="stylesheet" href="sexyforms-vista.css" media="all"/>
<script type="text/javascript" src="sexyforms.v1.3.mootools.js"></script>

Donde… :
sexyforms-vista.css es el nombre del estilo a usar. Puedes elegir entre estos estilos:

  • sexyforms-blue.css
  • sexyforms-red.css
  • sexyforms-green.css
  • sexyforms-dark.css
  • sexyforms-clean.css
  • sexyforms-vista.css
  • sexyforms-orange.css
  • sexyforms-simple.css
  • sexyforms-gamma.css

sexyforms.v1.3.mootools.js es el nombre del script. Si quieres ganar velocidad, puedes probar usando la versión comprimida: sexyforms.v1.3.mootools.min.js

Usando SexyForms

En mootools:

  $$("input", "select", "textarea").each(function(el) {
    el.DoSexy();
  });

Ejemplo: Buscar el formulario con clase ‘sexyform’ y embellecer todos sus elementos:

<script type="text/javascript">
window.addEvent('domready', function() {
  $$(".sexyform input", ".sexyform select", ".sexyform textarea").each(function(el) {
    el.DoSexy();
  });
});
</script>

Ejemplo: Embellecer un elemento individual:

<input type="text" id="name" value="" />
<script type="text/javascript">
  $('name').DoSexy();
</script>

Documentación

Funciones públicas:

  • element.DoSexy()

    Convierte un elemento triste y aburrido, en uno sexy!

  • element.reset()

    Convierte un elemento sexy, en uno aburrido y triste.

Licencia

El script es publicado bajo la licencia MIT.

Download

Changelog

SexyForms 1.3.1 - Octubre 30, 2009
* BugFixed: La lista del elemento Select no aparecia en el top correcto.

SexyForms 1.3.0 - Octubre 03, 2009
* Mas compatibilidad con IE6
* Nuevo SelectBox con manejo de eventos
* Bugs de posición en selectbox arreglados
* SelectBox ahora recibe el foco
* SelectBox ahora muestra iconos en IE6 & IE7
* Bug de Textarea en Opera arreglado

SexyForms 1.2.0 - Septiembre 29, 2009
* Elemento Select eliminado. Ahora se usa el nativo para evitar errores.
* Agregado InputFile
* BugFixed: Se hace mejor uso de la herencia.
* BugFixed: El textarea es del mismo tamaño en todos los navegadores.

SexyForms 1.1.0 - Junio 20, 2009
* BugFixed: Float elements compatible
* Decenas de cambios menores.

SexyForms 1.0.0 - Abril 04, 2009
* Versión Inicial.
* Mootools 1.2.2
galax dice:

ola eduardo he probado en ie6 y el problema que presenta es que al desplegar el combo no muestra nada solo los items vacios….

Para hacerlo compatible con Mootools añadiremos la función jQuery.noConflict() y cambiaremos las $ por jQuery, dejando así el código javascript:

jQuery.noConflict();
jQuery(document).ready(function(){

Juan Carlos dice:

Hola tu script es muy bueno!!! Realmente me encanta, sólo tengo una duda, como se puede se obtiene el valor de un “select” cuando cambia???

Gracias amigo!!!

leonardo dice:

buenas :D si esta muy bueno el script pero tengo un problema con el select, no me funciona el evento onchange :S saves a q se debe?

Mauricio dice:

Todos tenemos el mismo problema y no se que paso con eso, yo estoy esperando una nueva version hace mucho para poder implementarlo, realmente esta genial si no fuera por ese detalle que supongo no debe ser fácil de solucionar.

Eduardo dice:

Exacto, no es algo fácil de solucionar debido a que cada navegador maneja diferente los eventos.

Prometo traer novedades.

¿Este comentario te ha servido? y colabora con el blog
Responder
gerardo dice:

Excelente script Eduardo aparte he notado que en ie al menos en el 7 cuando scrolea uno la pagina los textos de los botones como que se degradan o desaparecen y vuelven hasta de pasas el cursor del raton sobre uno de los botones

saludos

esutoraiki dice:

Eduardo el select de tu ejemplo no funciona en chrome version 3.01, no hace seleccion

    Eduardo dice:

    Gracias por avisar, yo estoy usando el 4 y no me doy cuenta.

    A ver si puedo hacer un fix para hacerlo compatible…

    ¿Este comentario te ha servido? y colabora con el blog
    Responder
    esutoraiki dice:

    Hola Eduardo

    Mirando un poco más los sexyform en estos días, he notado que en Chrome y Safari los tabindex no funcionan adecuadamente en especial en los input de tipo radio y los checkpoint. Tambien para recordarte que en chorme no funcionan los select.

    Si existe alguna manera de que te ayude a solucionar estos problemas guíame, muchas gracias Eduardo.

Йожжж dice:

waiting for jQuery, thanks :)

Lumanet dice:

Hola Eduardo!

¿Como puedo hacer para activar un boton del formulario? Te explico, inicialmente el boton esta disabled, pero al rellenar todos los campos el campo se activa pero la imagen sigue siendo la de disbaled, aunque si clico en el el formulario se envia. lo que quiero es que el boton pase a verse activado de forma visual…

La comprobacion la hago mediante onblur en cada campo del formulario y hasta que todos no estan rellenos no lo activo, por si sirve de algo la aclaracion.

Muchas gracias y felicitaciones por todos los scripts que haces!

    esutoraiki dice:

    Hola creo que puede hacer algo como esto

    // en mootools
    $('id_button').fireEvent('click');
    // en jquery
    $('#id_button').trigger('click');

    Espero te sirva.

lou barnes dice:

v1.3 version, the selection have a bug under firefox. the dropdown menu display a wrong positon. when change back to V1.1, it works well. please check.

esutoraiki dice:

Hola Eduardo, como puedo poner sexy a varios checkpoints, teniendo en cuenta primero que no están dentro de un formulario, y segundo se generan de manera aleatoria con un id secuencial.

Raul dice:

muy bueno el sexy form realmente muy facil de aplicar.
Pero tengo un problema cuando apreto en el select la lista se desplaza envez de que este justo debajo del select esta o mas arriba o mas abajo, que puede ser?

gracias!

Jairo dice:

hola utilice este script en un formulario pero para validar los campos he utilizado livevalidation y cuando se valida un campo este se desarma queda una parte de arriba y otra abajo, que podria hacer o que script me recomiendan que no tenga problemas con sexyforms.

gracias

DjMiki dice:

hola eduardo, bueno comentando lo mismo que Raul, sigue existiendo ese problema de los SELECT,
bueno antes se desplazaban las opciones, y se ubica mas arriba, en vez de justo abajo.
Ahora aparecen dos Select, uno SEXY y otro ABURRIDO, y solo funciona el ABURRIDO.
Incluso en tu demo pasa eso.
Bueno encontre, un posible error(quizas equivocacion), en linea: 583, en la funcion createlist

Tu habias colocado:

var option = document.id(this.element.options[iiC]);

yo eh reemplazado eso, quitando el document.id por un $ quedando asi:

var option = $(this.element.options[iiC]);

Lo que si no puedo hacer la modificacion es en el archivo sexyforms.v1.3.mootools.min.js
Si podrias hacer eso Edu, seria chevere, gracias.

Hola amigo Eduardo, quier preguntarte si el soporte de SexyForms para SexyLightBox fue eliminado porq he intentado con el método q indicaste en un post anterior y no me funciona, y si cambió el método, podrías mostrarlo para ponerlo en funcionamiento?

Carlos Morales dice:

Hola! Me encanta su libreria para volver sexy los formularios, pero he encontrado una cosa: Saben que uso bastante la etiqueta para los formularios y me he dado cuenta que la libreria no funciona para estas etiquetas. Se podria hacer que funcionaran?

    hola @Carlos Morales no lo dudes, creeme q estamos en buenas manos y la idea es q nuestro amigo Eduardo sea quien lo implemente para conservar los SexyForms Originales… considerando lo q tu dices sería tomar todas las propiedades For de los label y agregarle un evento onClick para luego ejecutar un FireEvent al input… {espero no estar errado}

    Eduardo dice:

    Los label si funcionan. ¿o no?

    ¿Este comentario te ha servido? y colabora con el blog
    Responder
    esutoraiki dice:

    Los labes si fncionan

      Carlos Morales dice:

      disculpen.. es que no me di cuenta que no estaba apareciendo la etiqueta html que les queria mostrar, es para crear los botones con “” lo que pasa es que no me habia acordado que tenia que escribirlo dentro de comillas para que aparezcan las etiquetas, Yo suelo usar esas button para los botones y con la libreria de sexy forms no me las detecta..

        Carlos Morales dice:

        Disculpen.. las etiquetas html a las que me refiero son button /button, lo que pasa es que si las encierro entre los simbolos “menor que” y “mayor que” no se muestran aqui.

I’ve been developing an online store with oscommerce and have already integrated some jquey functions for the project which respective files are called in … By now the site is making use of the jqTransform (jquery) plugin to style the form elements, but I’d really like to have SexyForms working together with jquey along the project. Is there a way to have mootools working with other jquery plugins? I’ve read in the comments something about changing the selectors.. I’ve tried to install Sexyforms with no sucess since jquery is been called in the same page. Any suggestions or soltutions? Sorry for the dumb question, but I’m a new user of those js libraries.

The site can be seen here:

Thanks in Advance.

Sorry, confusion with the link tag, click in ‘thanks in advance’ to see the mentioned site.

See you all later!

pregunton dice:

sexy-forms hace que desaparezca un componente visible llamado Calendar que utilizo del framework YUI de yahoo.com (yui version 2.8.0r4), pero esto unicamente sucede en el browser Firefox 3.5.5, ya que en IE8 aparece correctamente!
ya hice pruebas y solamente vuelve a aparecer hasta que quito el mootools de mis librerias de javascript (ya probé con varias versiones de mootools 1.2.2 , 1.2.3 y 1.2.4).
También ya probé mezclarlas con las versiones de yui 2.6.0, 2.7.0b y 2.8.0r4 y aun sigo con ese mismo detalle.
Al parecer hay un conflicto en el componente Element de mootools con el componente Element de YUI. Espero que me puedas ayudar a resolverlo!!!!

    Raul dice:

    holas trata de buscar alguna funcion para que no haya conflictos entre mootools y YUI yo tenia con jquery pero lo solucione con noConflict()

Xib dice:

Hi all i have a little problem with sexyform and all browser. I can’t see the text in the select!!
did someone have and idea??

Carlos Morales dice:

Hola amigo, felicitaciones por esta gran libreria! Yo tengo un problema, es que uso las etiquetas y no me las reconoce la libreria, quedan con el estilo normal. Hay alguna solucion para esta estiqueta? muchas Gracias!

    Carlos Morales dice:

    Les ruego me disculpen por mi spam, ya tengo un comentario mas arriba donde varias personas me han respondido, lo que pasa es que no me percate de que no se estaba mostrando las etiquetas html a las que me referia.. estas son button /button y sirven para crear botones con cualquier tipo de media dentro de ellos, hasta una tabla.. Al parecer sexy forms no soporta estas etiquetas.. :(

      Eduardo dice:

      SexyForms si soporta las etiquetas button.

      Lo que pasa es que estas preguntando algo al aire, y como ninguno de nosotros no lee las mentes (por ahora) no podemos decirte que error estas cometiendo (o si es un error del script) hasta no ver el ejemplo en cuestión.

      ¿Este comentario te ha servido? y colabora con el blog
      Responder
esutoraiki dice:

Hola Eduardo: Como te puedo ayudar para que en los SF funcionen de nuevo los campos select que están presentando problemas incluso en la demo. Si existe alguna forma en la cual te pueda ayudar a programar, dime y con muchísimo gusto te ayudo.

Manuel dice:

Hola Eduardo, estoy de visita en unapc con Explorer 8 y veo q lapagina de demo tiene errores, en el combo y en los checks para ser mas especifico, espero puedas solucionar ese tema (Y)

DjMiki dice:

ESUTORAIKI, yo postee la solucion unos cuantos comentarios arriba, o posible solucion a ese problema sobre los combos.
En linea: 583, en la funcion createlist:

var option = document.id(this.element.options[iiC]);

Reemplazar quitando el document.id por un $ quedando asi:

var option = $(this.element.options[iiC]);

Espero haberte ayudado

    Eduardo dice:

    El error se soluciona utilizando la última versión de mootools la 1.2.3

    En cuanto al error del select estoy conciente y sé que es un problema de position:relative pero aún no ando inspirado como para solucionarlo.

    ¿Este comentario te ha servido? y colabora con el blog
    Responder
      esutoraiki dice:

      Te refieres Eduardo al bug que presentan los select cuando los visualizas en Chrome. O al bug de posición del campo de lista del select.

joe dice:

CUando corro la pagina, el formualrio desaparece, mas sin embargpo en el formulario de html sirve, pero tampoc ahi cuando cambio los themes no se muestran. Qu ehago?

Xib dice:

El problemo con los lista exista con mootools 1.2.4. Hay une solucion??

zilveer dice:

this is a really amazing script..
kepp up the good work guys:)

zilveer dice:

hi again,
by the way the script at the link at
http://www.coders.me/ejemplos/sexy-forms/demo/

doesnt work properly.. when i click at select a country, on the modified version it doesnt show up anything.. what is the problem?
please help me to solve this.

/regards

canedo dice:

mi duda es. si quisiera añadir varias funciones basadas en mootools digase sexyforms, sexyalerts, y otras más, solo debo bajar un solo archivo de mootools ? (1.2.3 en este caso) y que archivos necesitaria de cada funcion? pregunto esto para no tener que tener varias versiones modificadas de mootools innecesarias… saludos

    Eduardo dice:

    Exactamente, y siempre es conveniente tener sólo la última versión de mootools (que actualmente es la 1.2.4)

    Los necesarios de cada funcion, dependen de la funcion.

    ¿Este comentario te ha servido? y colabora con el blog
    Responder