JavaScript/jQuery 表单美化插件小结

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 使用方法,在页面头部引入以下脚本及样式即可:

复制代码 代码如下:

<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 使用方法,在页面头部引入以下脚本及样式:

复制代码 代码如下:

<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 使用方法,在页面头部引入以下脚本及样式即可:

复制代码 代码如下:

<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/ 使用方法,在页面头部引入以下脚本及样式即可:

复制代码 代码如下:

<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/
使用方法,在页面头部引入以下脚本及样式即可:

复制代码 代码如下:

<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:打包下载地址

http://www.jb51.net/article/29675.htm

时间: 2024-08-05 19:33:03

JavaScript/jQuery 表单美化插件小结的相关文章

jQuery表单美化插件jqTransform

jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+, 1.加载jQuery和插件 <script type="text/javascript" src="js

jQuery和CSS3超酷表单美化插件

这是一款效果非常精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数网站上都有让用户填写的联系方式表单,一个设计良好的表单能够大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进行加工,并使用jQuery来制作label动画,使表单样式更加大方得体. 这个表单美化插件中包含了常用的表单元素:输入框.下拉框.单选按钮.复选框和文本框. 在线演示:http://www.htmleaf.com/Demo/201503121507.html 下载地址:http://www.html

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script

表单美化插件

Form Effect - 表单美化插件 一个jQuery样式插件,帮助你对表单中的控件进行式样控制. 1)Formly这个基于jQuery的表单美化插件,并带有表单校验功能. http://thrivingkings.com/formly/ 2)jQuery Tags Input这个jQuery插件能够将一个简单的文本输入转换成一个漂亮的Tag列表. http://xoxco.com/clickable/jquery-tags-input 演示地址: http://xoxco.com/clic

jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. 三.jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

【jquery】Validform,一款不错的 jquery 表单验证插件

关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! 功能简介 可以在 input 上直接绑定正则,可

jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 三.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 四.详细代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

JQuery 表单校验插件 validate 实践纪录

JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有插件对应, validate插件便是一个. 官网地址 : http://jqueryvalidation.org/ 官网文档:http://jqueryvalidation.org/documentation/ 下面网址是开发者提供的demo, 代码可下载, 可以给大家提供参考: http://jq

javaScript简单表单验证插件

 Validator = { Require : /.+/, Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,     Phone : /^(0[1-9][0-9]{1,2}-[1-9][0-9]{6,7})$/, Mobile : /^((\(\d{3}\))|(\d{3}\-))?1[3,5,8]\d{9}$/, Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[