Sexy Forms

View this post in Español

Sexyforms is a javascript library that improves the appearance of XHTML forms. It’s compatible with all of modern browsers, and also with Internet Explorer. It’s no-intrusive and it lets you create your own styles!


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

Demo

Form ElementsSelectBox with Ajax

sexyforms-example

Features

tablita

How to Install

You can install it as another 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>

Where… :
sexyforms-vista.css is the name of the style to use. You can choose among these styles:

  • 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 is the name of the script. If you want to get speed, you can try using the simplified version: sexyforms.v1.3.mootools.min.js

Using SexyForms

In mootools:

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

Example: Search the form with the class ‘sexyform’ and beautify all its elements:

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

Example: Beautify an single element:

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

Documentation

Public Functions:

  • element.DoSexy()

    Converts a sad and boring element in a sexy one!

  • element.reset()

    Converts a sexy element in a sad and boring one.

License

This script is published under license 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
Dan says:

No se preocupen, ya arregle el problema despues de un par de horas. Simplemente pasé todos los archivps denuevo

mickey says:

in sexyforms.v1.3.mootools.js
var option = document.id(this.element.options[iiC]);
should be
var option = this.element.options[iiC];[/js]

Andres says:

hola! Tengo una grave problema…lo q pasa esq tengo formularios en los q uso selects…con un boton reset para cancelar…pero resulta q los select no ovedecen al boton de reset!!!! claro oviamente porq son diferentes a un select normal ya q estan contruidos a base de imagenes!!! PERO ALGUIEN SABE ALGUNA FORMA DE REINICIARLOS SIN RECARGAR LA PAGINA????? De antemano muchas gracias..ojala alguien sepa como hacerlo!

Ase says:

Hola!

Tengo un problema, los listados no se ven bien, me aparece el listado con la clase y junto a el el mismo sin la clase y el que tiene la clase no responde, solo el sin clase.

Precisamente lo quiero para los listados!!! Mala suerte la mia!

Ayuda!!!

    Carlos says:

    umeh onuckaehykwu.duke Posted on am umeh onuckaehykwu,a 27years old boy from nigeria,a graduate of computer and information science lead city university ibadan.please sir,i tried to look for the link of where to fill the scholarship application form

ANDRES says:

ASE...ESO ES PORQ TIENES LA LIBRERIA INCORRECTA..A MI ME PASABA ..DESCARGUE LA VERSION COMPLETA 1.2.4 Y SE ARREGLO EL PROBLEMA DE LOS SELECT…!!!!

http://mootools.net/download EN Download MooTools 1.2.4

pedro A rendon says:

mmmmmm
Como puedo aplicar SexyForm en SexyLigthBox ose quiero que al hacer click en “ingresar” me aparesca un SexyForm
de Antemano muchas gracias

    bm says:

    Hi,

    thanks, its great.

    SexyForms navigation in open selectbox by keys doesn’t works with FF. Check on the demo page – you cannot reach esperanto, after russian it jumps to english.

gobygoba says:

Hello,

Have you an idea of the date when Sexy Forms can be used with JQuery ?

Thanks

Amigos disculpen la molestia, no se si ya alguien pudo con el problema de los select anidados la libreria del sexyform es muy buena y no quiero dejar de usarla.
el detalle esta en q necesito trabajar con select anidados y no me muestra nada, es mas bajo el ejemplo q tienen aqui y no me muestra nada ni marca error. Estoy usando el mootools 1.3 y el sexyforms 1.3.1 supuestamente y no me actualiza la informacion. Me urge es para el trabajo de la escuela. Gracias y disculpen la molestia

Con caracter de urgente… alguien q me ayude porfavor, no me funciona ningun evento en los checkbox. por favor alguien podria explicarme como usarlo.

se los agradecere. saludos

    Camilo says:

    si logras solucionar tu problema por favor puedes compartirlo, por que la verdad tampoco se que hacer!!!!

      use otro componente el ezmark pero tiene problemas con el ie en los demas exploradores funciona correctamente. Ahora tengo un problema con un modulo el cual la idea es q filtre los resultados de una tabla con ajax y un select todo funciona bien el detalle esta que al actualizar la tabla se me pierde el formato del sexyform de del select y hasta el tooltips deja de funcionar. Alguna sugerencia?

        Patrisia says:

        carlos batista Posted on Hi dear memebr of Scholarship Online I want to know the sebsite to subscribe me or to apply to this sholarship, could you send me the form application of this career. I will be happy to revive it. Thank you very much!

Camilo says:

Ayudaaa no funciona el select de sexyform en google chrome si alguien sabe como arreglar este problema por favor colaboren para solucionar este problema por que chrome tiene en estos momentos mucha demanda y si no funciona el sexy form entonces ni para que implementarlo

de antemano gracias los que puedan colaborar

    skadelabro says:

    Camilo: me pasaba lo mismo, asi que actualicé la libreria de mootools y se soluciono, espero te sirva ya que a mi si :) ,

    atte skandelabro

    Camilo says:

    Bro… creo que no me expliqué bien. el diseño del select está bn pero no me deja seleccionar los elementos con el evento click en google chrome, es mas mira el ejemplo de este blog en un chrome actualizado y te das cuenta que no funciona.

    OxIon says:

    buen día. pues a mi me pasa lo mismo y no veo el porque… si abro esta misma pagina en el chrome no funciona el select pero si la abro por ejemplo en el firefox si funciona normalito, es mas se ve un bonito efecto de recorrido. alguien sabe como solucionarlo o aun nada???

    gracias.

      OxIon says:

      hola… que pena, efectivamente se pasa actualizando el moo, tenia el 2.2 y le puse el 1.3 y va de lujo.

        Narsimha says:

        Thanks for the custom drop down soltuion and nice code.but I have one issue with custom drop down. I am developing the website for “iPhone, iPad and iPod”. when using custom drop down it is working perfect. but when I have added google map with custom drop down on a page, the custom drop down start creating a problem. when user click on drop down, only drop down border display to the user (all the items just become invisible). without google map everything is working fine. can you please help me to solve the issue ?

    Ryan says:

    I was trying this with the lastet jquery-library and it didn’t work. But I found the solution.Apparently they don’t use className anymore. But if you change that to class, everything is solved. I hope I saved someones time with this.Also, to get the selected index in the jquery cod/plugin, this could be handyif(i==select.find(‘option:selected’).index()){selectBox.html(option.text());}And thank you for all the tutorials. Keep it up :D

skandelabro says:

Igual tengo otra pregunta… lo que pasa es que al momento de usar un select solo en un formulario… al darle click para que me liste el contenido.. se corre… por favor si alguien puede ayudarme :?

    Camilo says:

    Veras no se si sea el mismo problema pero al abrir el proyecto con un diseñador(dreamweaver) aparecen espacios o el tamaño es muy reducido en caso de que lo tengas dentro de una tabla y no cuadra el tamaño de la celda con el del select entonces arreglas en el diseñador y se arregla tu problema de descudre.

      skandelabro says:

      no, no es ese el problema… mira intenta dejar solo un input de tipo select.. en el archivo, y veras que se deforma.. por el hecho de estar solo.,, al momento de listar el contenido..

      :/

DjMiki says:

Hola Eduardo, bueno veo que aun tienes seguidores en la web y de tus plugins, exitos pues…
Este coments es para bueno animarte a trabajar este plugins(SexyForms) en jQuery, como eh visto en CodeCayon todos tus plugins que alli vendes, son enteramente en jQuery, y bueno creo que nos podrias dar la posibilidad de cumplir lo prometido por ti cuando desarrollaaste este plugins, ya que como hemos visto en todo el avance web, jQuery se ah llevado a mootools en fin, bueno creo que todos tus seguidores deseamos eso, en particular yo uso bastante el sexyform, te pedimos porfavor lo reconsideres. chau mucha suerte

saerp says:

En mi combo de mi formulario no funciona como puedo hacer para que se embellezca porq es muy bonita la libreria AYUDA!! alguien q haya podido

Gerardo says:

No me funciona el selectbox alguna idea ? gracias!!

antonio says:

Como se usa se vaina expliquen como incorporarlo a un formulario