JavaScript/jQuery表单美化插件小结_javascript技巧



Niceforms
Niceforms是一款的表单美化工具，当前版本为2.0
官方主页：http://www.emblematiq.com/lab/niceforms/
官方演示：http://www.emblematiq.com/lab/niceforms/demo/niceforms.html
GitHub：https://github.com/emblematiq/Niceforms
使用方法，在页面头部引入以下脚本及样式即可：
代码如下:






imagesPath = "niceforms-v2.0/img/";// niceforms图片资源的路径


效果：

Uniform
这是jQuery的表单美化插件
官方网站及在线演示：http://uniformjs.com/
github主页：https://github.com/pixelmatrix/uniform
使用方法，在页面头部引入以下脚本及样式：
代码如下:




$(function() {
$("input, textarea, select, button").uniform();
});


Uniform包含3种主题default,Aristo,Agent，使用时引用相应目录下的css即可。
效果请直接看官方演示

Formly
Formly也是jQuery的一款表单美化插件
官方网站及在线演示：http://thrivingkings.com/formly/
github：https://github.com/ThrivingKings/Formly
使用方法，在页面头部引入以下脚本及样式即可：
代码如下:




$(function() {
$("form").formly();
});


效果请直接看官方演示

Ideal Forms
Ideal Forms也是jQuery的一款表单美化插件
官方网站：spacirdesigns.com/jqidealforms
GoogleCode：http://code.google.com/p/idealforms/
使用方法，在页面头部引入以下脚本及样式即可：
代码如下:










$(function() {
$("#fancyform").idealforms();
});


效果：

jqTransform
jqTransform也是jQuery的一款表单美化插件
官方网站及在线演示：http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
使用方法，在页面头部引入以下脚本及样式即可：
代码如下:





$(function() {
$('form').jqTransform({ imgPath: 'jqtransformplugin/img/' });
});


效果：

Carbon Fiber Signup Form
纤维化登录表单，这货没有任何js，只有css/html
官方网站：http://tutorialzine.com/2010/04/carbon-signup-form/
效果：

结尾
放上DEMO：打包下载地址