Summary of JavaScript/jQuery form beautification plug-ins

Niceforms
Niceforms is an independent form beautification tool. The current version is 2.0.
Official homepage: http://www.emblematiq.com/lab/niceforms/
Official Demo: http://www.emblematiq.com/lab/niceforms/demo/niceforms.html
GitHub: https://github.com/emblematiq/Niceforms
Use the following script and style on the page header: Copy codeThe Code is as follows: <link href = "niceforms-v2.0/niceforms-default.css" rel = "stylesheet"/>
<Script src = "niceforms-v2.0/niceforms. js"> </script>
<! -- [If IE]>
<Style>/* the label behind radio/checkbox may be abnormal in ie */
. Opt {padding-left: 8px ;}
</Style>
<! [Endif] -->
<Script>
ImagesPath = "niceforms-v2.0/img/"; // niceforms path for image resources
</Script>

Effect:

Uniform
This is the form beautification plug-in of jQuery.
Official website and Online Demo: http://uniformjs.com/
Github home: https://github.com/pixelmatrix/uniform
Use the following script and style in the page header:Copy codeThe Code is as follows: <link rel = "stylesheet" href = "pixelmatrix-uniform/default/css/uniform.default.css" media = "screen"/>
<Script src = "jquery-1.7.1.min.js"> </script>
<Script src = "pixelmatrix-uniform/jquery. uniform. min. js" charset = "UTF-8"> </script>
<Script>
$ (Function (){
$ ("Input, textarea, select, button"). uniform ();
});
</Script>

Uniform contains three themes: default, Aristo, and Agent. You can reference the css in the corresponding directory when using it.
For more information, see the official demo.

Formly
Formly is also a form beautification plug-in of jQuery.
Official website and Online Demo: http://thrivingkings.com/formly/
Github: https://github.com/ThrivingKings/Formly
Use the following script and style on the page header:Copy codeThe Code is as follows: <link href = "Formly/formly.css" rel = "stylesheet"/>
<Script src = "jquery-1.7.1.min.js"> </script>
<Script src = "Formly/formly. js"> </script>
<Script>
$ (Function (){
$ ("Form"). formly ();
});
</Script>

For more information, see the official demo.

Ideal Forms
Ideal Forms is also a form beautification plug-in of jQuery.
Official Website: spacirdesigns.com/jqidealforms
GoogleCode: http://code.google.com/p/idealforms/
Use the following script and style on the page header:Copy codeThe Code is as follows: <link href = "idealforms1.02/css/normalize.css" rel = "stylesheet"/>
<Link href = "idealforms1.02/css/idealforms/idealforms.css" rel = "stylesheet"/>
<Link href = "idealforms1.02/css/master.css" rel = "stylesheet" media = "screen"/>
<Style>
Ul. idealcheck li, ul. idealradio li {
Display: inline-block;
}
Li {margin: 0 ;}
Body {
Width: 700px;
}
</Style>
<! -- [If lt IE 8]>
<Style>/* the browser versions earlier than ie8 may have problems fixed */
. Main-label, ul. idealcheck, ul. idealcheck li, ul. idealradio, ul. idealradio li {float: left ;}
Div {clear: both ;}
</Style>
<! [Endif] -->
<Script src = "jquery-1.7.1.min.js"> </script>
<Script src = "idealforms1.02/js/jquery. idealforms. js"> </script>
<Script>
$ (Function (){
$ ("# Fancyform"). idealforms ();
});
</Script>

Effect:

JqTransform
JqTransform is also a form beautification plug-in of jQuery.
Official website and Online Demo: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
Use the following script and style on the page header:Copy codeThe Code is as follows: <link rel = "stylesheet" href = "jqtransformplugin/jqtransform.css" media = "all"/>
<Script src = "jquery-1.7.1.min.js"> </script>
<Script src = "jqtransformplugin/jquery. jqtransform. js"> </script>
<Style>/* repair of non-alignment of form elements */
Form {
Clear: both;
}
Form. jqtransform. rowElem label {
Width: 150px;
Text-align: right;
}
Form. jqtransform. rowElem label. radiovalue {
Width: 30px;
Display: block;
Float: left;
}
Form. jqtransform. rowElem label. checkboxvalue {
Width: 70px;
Display: block;
Float: left;
Padding-left: 5px;
}
. JqTransformSelectWrapper li {
Padding: 0;
Margin: 0;
}
</Style>
<Script>
$ (Function (){
$ ('Form'). jqTransform ({imgPath: 'jqtransformin in/img /'});
});
</Script>

Effect:

Carbon Fiber Signup Form
Fibrosis login form, this product does not have any js, only css/html
Http://tutorialzine.com/2010/04/carbon-signup-form/
Effect:

End
Put on DEMO: Package