JavaScript/jQuery 表单美化插件

http://www.cnblogs.com/lwme/archive/2012/02/14/javascript-jquery-form-beautify-tool.html

 

用过一些表单美化的工具，觉得不错，特地分享一下

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

使用方法，在页面头部引入以下脚本及样式即可：

 

?

1 2 3 4 5 6 7 8 9 10

<link href= "niceforms-v2.0/niceforms-default.css"  rel= "stylesheet"  /> <script src= "niceforms-v2.0/niceforms.js" ></script> <!--[ if  IE]> <style> /*此样式用于radio/checkbox后面的label在ie下可能不正常*/ .opt { padding-left: 8px; } </style> <![endif]--> <script>    imagesPath = "niceforms-v2.0/img/" ; // niceforms图片资源的路径 </script>

效果：

 

 

Uniform

这是jQuery的表单美化插件

官方网站及在线演示：http://uniformjs.com/

github主页：https://github.com/pixelmatrix/uniform

使用方法，在页面头部引入以下脚本及样式：

 

?

1 2 3 4 5 6 7 8

<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包含3种主题default,Aristo,Agent，使用时引用相应目录下的css即可。

效果请直接看官方演示

 

Formly

Formly也是jQuery的一款表单美化插件

官方网站及在线演示：http://thrivingkings.com/formly/

github：https://github.com/ThrivingKings/Formly

使用方法，在页面头部引入以下脚本及样式即可：

 

?

1 2 3 4 5 6 7 8

<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>

效果请直接看官方演示

 

 

Ideal Forms

Ideal Forms也是jQuery的一款表单美化插件

官方网站：spacirdesigns.com/jqidealforms

GoogleCode：http://code.google.com/p/idealforms/

使用方法，在页面头部引入以下脚本及样式即可：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<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> /*在ie8以下版本的浏览器可能会存在问题的修复*/ .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>

效果：

 

 

jqTransform

jqTransform也是jQuery的一款表单美化插件

官方网站及在线演示：http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

使用方法，在页面头部引入以下脚本及样式即可：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<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> /*表单元素不对齐的修复*/    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: 'jqtransformplugin/img/'  });    }); </script>

效果：

 

 

Carbon Fiber Signup Form

纤维化登录表单，这货没有任何js，只有css/html

官方网站：http://tutorialzine.com/2010/04/carbon-signup-form/

效果：

结尾

放上DEMO：点击下载