`

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:点击下载

分享到:
评论

相关推荐

    JavaScript/jQuery 表单美化插件小结

    因此,出现了许多JavaScript和jQuery的表单美化插件,帮助开发者轻松实现表单的视觉升级,提高用户体验。本文将介绍几个流行的表单美化工具:Niceforms、Uniform、Formly以及Ideal Forms。 首先,Niceforms是一款...

    jquery form表单美化插件

    今天我们将深入探讨的是一个关于jQuery的实用工具——"jquery form表单美化插件"。这个插件专门用于提升网页表单的用户体验和视觉效果,使原本平淡无奇的HTML表单变得更具吸引力。 首先,我们要理解jQuery Form插件...

    很不错的jquery表单美化插件

    而“很不错的jquery表单美化插件”正是基于jQuery的一款工具,旨在提升网页中表单元素的视觉效果和用户体验。这款插件能够帮助开发者轻松实现表单的美观化,同时保持良好的兼容性,覆盖了各种主流浏览器。 表单美化...

    jQuery表单元素美化插件jqtransform.zip

    jQuery表单元素美化插件jqtransform是一个专门针对HTML表单组件进行美化和增强用户体验的JavaScript插件。这个插件能够将传统的、样式单一的表单元素,如文本输入框(text inputs)、复选框(checkboxes)、单选按钮...

    jquery form表单美化插件修订

    "jquery form表单美化插件修订"这个主题涉及到了jQuery的一个具体应用,即对网页表单进行美化,以提供更好的用户体验。表单是网页互动的重要组成部分,美观且易用的表单设计可以提高用户满意度,从而提升网站的整体...

    jQuery inputbox表单美化插件自定义select框

    "jQuery inputbox表单美化插件自定义select框"是一个专注于改善select下拉框外观的解决方案。这个插件利用jQuery的强大功能,为传统的HTML select元素提供了自定义样式和交互效果,让表单看起来更加专业且用户友好。...

    带搜索框的jQuery下拉框美化插件.rar

    "带搜索框的jQuery下拉框美化插件"就是这样一款致力于优化网站表单元素的工具,它将传统的下拉框与搜索功能相结合,使得用户在面对大量选项时能够更加高效地找到所需信息。接下来,我们将深入探讨这款插件的工作原理...

    jquery表单美化

    总结来说,jQuery表单美化涉及的主要知识点包括:jQuery事件处理、DOM操作、样式切换、动画效果、表单序列化、Ajax提交以及第三方插件的使用。通过掌握这些技能,开发者能够打造出既实用又美观的网页表单,提升用户...

    带搜索框的jQuery下拉框美化插件 searchableSelect

    "带搜索框的jQuery下拉框美化插件 searchableSelect"就是这样一个工具,它旨在为开发者提供一个既美观又实用的下拉选项选择器,同时集成了搜索功能,让用户在大量数据中快速找到目标。 jQuery是一个广泛使用的...

    jquery表单UI美化

    3. **插件使用**:jQuery有许多优秀的表单插件,如jQuery UI、Bootstrap、jQuery Validation Plugin等,它们提供了丰富的预设样式和功能,能够快速实现表单美化。 二、jQuery UI美化表单 1. **jQuery UI组件**:...

    javascript表单美化和验证插件

    JavaScript 表单美化和验证插件是Web开发中不可或缺的一部分,尤其在构建用户友好且具有交互性的网页时。这类插件通常提供丰富的功能,以提升表单的视觉吸引力和用户体验,同时确保数据的有效性。本插件具备以下关键...

    jQuery下拉框美化插件fancyspinbox.zip

    在本文中,我们将深入探讨jQuery下拉框美化插件FancySpinBox,以及它如何通过增强交互性和视觉吸引力来提升网页表单的用户体验。FancySpinBox是一个专为改善标准HTML `&lt;select&gt;` 元素外观和功能而设计的JavaScript...

    jQuery表单元素美化插件.zip

    在实际应用中,jQuery表单美化插件通常会封装一些常用功能,例如自动填充、错误提示、表单验证等,开发者只需简单调用相关方法,就能快速实现表单的美化。同时,这些插件往往还支持自定义配置,以适应不同的设计需求...

    jQuery下拉框美化插件selectList.rar

    "jQuery下拉框美化插件selectList"就是这样一个工具。 selectList是一款专为jQuery设计的轻量级插件,它的主要目标是将传统的HTML下拉框进行美化,提供更好的视觉体验和交互功能。以下是一些关于selectList插件的...

    jQuery下拉菜单表单美化插件

    "jQuery下拉菜单表单美化插件",如"Image DropDown",正是为了提升这种体验而诞生的工具。这款插件是基于JavaScript库jQuery开发的,其主要目标是将传统的HTML `&lt;select&gt;` 下拉菜单转化为更具吸引力、更易用的交互...

    jQuery form表单美化实例代码

    最后,`js`目录中的文件通常是JavaScript代码,其中包含了使用jQuery进行表单美化和交互增强的逻辑。jQuery提供了一系列方法,如`.addClass()`, `.removeClass()`, `.toggleClass()`, `.attr()`, `.val()`等,可以...

    form表单美化插件

    为了提升用户体验和网站美观度,"form表单美化插件"应运而生。这个插件专门针对这一问题,旨在通过简单的方式将普通的HTML表单元素转化为更为现代、优雅的样式。 该插件基于jQuery库,这意味着它能够无缝集成到使用...

    基于jquery的非常强大的表单美化

    在表单美化方面,jQuery插件可以方便地添加动态效果,增强用户交互体验。例如,通过jQuery,我们可以实现表单元素的聚焦、验证提示、输入反馈等动态效果,使得用户在填写表单时有更流畅的感受。 该项目的核心特性...

Global site tag (gtag.js) - Google Analytics