10 个基于jQuery的表单增强脚本和插件

以下10个基于jQuery的脚本和插件可以有效地提高表单的可访问性和功能性,本文中的一些源码和演示也许能帮助你优化当前的表单,使访问者获得良好的用户体验。 

1. Form Hints 1.0 

使用这个插件,你可以为网站中的的任何一个表单控件添加描述文字,可以通过title属性来添加。用户可以点击控件来显示或隐藏描述文字。 

源码+演示 

2. jQuery 表单选择器 

jQuery的许多表单选择器可以更加方便和高效地访问表单元素。下面是一个简单的jQuery表单选择器相关介绍。 

源码 / 演示 

3. Web SpinButton 

这是一个关于文本框数值微调按钮控件的示例。 

源码+演示 

4. 页面跳转警告 

添加该脚本后,在你离开页面前,会弹出一个警告,提示你提交表单或进行其他类似的操作。 

源码 / 演示 

5. Twitter 提示框 

添加该脚本后,会出现一个类似Twitter的简单有趣的提示框。 

源码+演示 

6. Unwrongest 

添加这个jQuery插件后,文本框的大小会随着输入的内容自动进行调整,就像Facebook的Boxes一样。 

源码 / 演示 

7. Clearfield 

当输入框内没有内容时,利用这个插件可以显示输入提示。 

源码+演示 

8. 选中多个元素 

利用这个脚本,可以在所有供你选择的条目中选择全部,或只选择需要的元素集合。 

源码 / 演示 

9. 将表单label显示在输入框中 

添加该脚本后,可以将表单的label值显示在输入框中,使界面更加简洁。 

源码 / 演示 

10. 自动保存 

这个插件增强了表单功能,可以自动将表单字段保存到cookies中。每经过一定的时间(默认为10秒)或离开页面时自动进行保存。 

源码+演示 

英文原文:http://www.jquery4u.com/forms/10-jquery-form-%E2%80%93-accessibility-functionality/

时间: 2024-09-23 20:28:16

10 个基于jQuery的表单增强脚本和插件的相关文章

基于jquery的一个简单的脚本验证插件_jquery

主要用到了jquery,以及自定义的一个属性wl_check,属性说明如下: 1.语法 [need:true,type:int,maxlen:15,minlen:2] 2.关键字 need:文本输入框的必填限制 regtype:文本输入框的正则表达式类别验证 minlen:文本输入框的最小输入长度 maxlen:文本输入框的最大输入长度 minval:数字型文本输入框的最值 maxval:数字型文本输入框的最值 notval:下拉框的必选设置 minselect:单复选框的最少选项数 maxse

使用decj简化Web前端开发(二) 声明式表单增强和页面初始化

引言 表单(Form)是Web应用中数据展现和收集常用的HTML元素.开发人员经常需要处理表单的数据填充.数据校验和格式化以及数据打包.另外,页面在加载完毕后往往需要执行一段初始化逻辑.本期将介绍decj对HTML表单的声明式增强和声明式页面/模块初始化这2个特性. 声明式表单功能增强 decj以声明式编程的方式对表单数据展现和收集功能进行增强.在数据展现方面,decj支持根据指定的数据自动将数据填充到表单中.对表单字段值进行自动格式化.在数据收集方面,decj支持对表单字段值进行自动校验.对表

10个基于jQuery或JavaScript的WYSIWYG 编辑器整理_jquery

在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office?的操作体验.如今,任何网站内容管理系统(CMS)和博客系统都需要一个这样的编辑器.本文精选了5个基于 JavaScript?的编辑器,5个基于 jQuery 框架的编辑器. MarkitUp – jQuery Official Website | Demo markItUp! 它不是一个"全功能,乱用"的编辑器.相反,它是一个非常轻量级的,可

基于jQuery复制表单元素的例子

我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表 单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能.首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script src="jquery.

10 款基于 jQuery 的切换效果插件推荐

本文整理了 10 款非常好用的jQuery切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换.  1. InnerFade  这是一个基于jQuery的小插件,可以实现页面内的元素淡入淡出效果.  源码/演示  2. HighlightFade  该插件可以实现高亮.缩放等效果.  源码/演示  3. Dynamic Page / Replacing Content  使用按钮实现网页内容的动态切换.  源码 / 演示  4. jqFancyTransitions 

基于jQuery实现仿淘宝套餐选择插件

 本文给大家介绍的是一款基于jQuery实现放淘宝套餐选择的插件,主要是基于本地json数据的选择列创建,有需要的小伙伴参考下.     首先是页面HTML代码   代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery.min.js

Jquery提交表单 Form.js官方插件介绍_jquery

先说说常用的Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2.Form插件下载 form.js 3.Form插件的简单入门 第一步:先增加一个表单 代码: 复制代码 代码如下: <form id="myForm" action="comment.php" method="post"> Name: <inpu

基于jQuery全屏焦点图左右切换插件responsiveslides_jquery

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览    源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,

基于jQuery实现表单提交验证_jquery

html表单代码: 复制代码 代码如下:    <form method="post" action="">        <div class="int">           <label for="username">用户名:</label>           <input type="text" id="username"