20个jQuery插件，帮你打造完美网页表单

     <p>网页表单主要是用来从用户那里收集一些必要的信息，是网页设计中不可或缺的一环。一个设计良好的表单能更有效的获取用户信息，也会给用户带来更好地 使用体 验。基于这一点，很多设计师开始使用jQuery来创建网页表单。而使用jQuery表单插件会让你的网页表单脱颖而出。 <br /> <br /> 为 此，我们收集了一些不同类型的jQuery表单插件和读者分享。在下面这些jQuery表单插件中，有些能改变表单的外观并同时兼容各种浏览 器；有些用于表单验证并方便管理员和用户的操作；还有一些则是非常流行的日历表单和下拉列表表单。我们希望这些插件能够有助于你的工作。 <br /> <br /> <strong>1、<a href="/misc/goto?guid=4958199714093328732" target="_blank">高亮表单插件</a></strong> <br /> <br /> 高亮功能可以增加页面的可用性。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/12a0d43434a4d0f53e4b88a8da8cdef8.jpg" width="530" height="212" />    </div>    <p><br /> <strong>2、<a href="/misc/goto?guid=4958199709771620500" target="_blank">mcDropdown</a></strong> <br /> <br /> 一个允许用户选择下拉菜单的表单插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/e0dcb4f26cbf4ee7109474523949b016.jpg" width="530" height="212" />    </div>    <p><br /> <strong>3、<a href="/misc/goto?guid=4958187163874812080" target="_blank">让图片成为输入框的一部分</a></strong> <br /> <br /> 在输入框里可以嵌入图片。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/bcf1bf68238406b6132d9ae7b632e2e7.jpg" width="530" height="212" />    </div>    <p><br /> <strong>4、<a href="/misc/goto?guid=4958199708292598033" target="_blank">jQuery Impromptu</a></strong> <br /> <br /> 一个为用户提供更舒适输入方式的表单插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/b7ce6db21dbead7eb9ffeb979916ba0b.jpg" width="530" height="212" />    </div>    <p><br /> <strong>5、<a href="/misc/goto?guid=4958199710526408916" target="_blank">jqTransform</a></strong> <br /> <br /> 一个美化表单元素的风格插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/0b1f163b082f1360462d381b4d8c3929.jpg" width="530" height="170" />    </div>    <p><br /> <strong>6、<a href="/misc/goto?guid=4958335163811621104" target="_blank">密码强度测试仪</a></strong> <br /> <br /> 一个能显示密码强度的jQuery表单插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/a9f46fe545a2de8ed257e256e8c340f7.jpg" width="530" height="212" />    </div>    <p><br /> <strong>7、<a href="/misc/goto?guid=4958335164610644919" target="_blank">The jQuery Tooltip</a></strong> <br /> <br /> 添加了一个消息提示功能，用户可根据自己的喜好来做出相应的选择。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/59934fc8fc59f9297b8e9d684630ba34.jpg" width="530" height="212" />    </div>    <p><br /> <strong>8、<a href="/misc/goto?guid=4958335165401091272" target="_blank">日期选择插件</a></strong> <br /> <br /> 一个简单的日期选择插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/d06bfe2758fbe3f22636f461748f2ec2.jpg" width="530" height="170" />    </div>    <p><br /> <strong>9、<a href="/misc/goto?guid=4958335166200785758" target="_blank">自动提示插件</a></strong> <br /> <br /> 一个轻量级的自动提示插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/9ad6f76f6fe27962d059efdcc5b135f8.jpg" width="530" height="212" />    </div>    <p><br /> <strong>10、<a href="/misc/goto?guid=4958318929049115134" target="_blank">自动保存插件</a></strong> <br /> <br /> 这个插件被设计用来自动保存表单信息，这样即使有某些未知的事情发生，用户也不会丢失他们已经输入的内容。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/565edfb6f3c5c8b546e9e58a0c976184.jpg" width="530" height="170" />    </div>    <p><br /> <strong>11、<a href="/misc/goto?guid=4958335167727545656" target="_blank">表单输入自动tab和自动过滤</a></strong> <br /> <br /> 提供了自动跳到下一个输入框功能和自动过滤功能。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/fbd5a735d7fc303fedb0c01367932daf.jpg" width="530" height="212" />    </div>    <p><br /> <strong>12、<a href="/misc/goto?guid=4958187152837500887" target="_blank">AJAX Upload</a></strong> <br /> <br /> 一个无刷新上传多个文件的插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/03396f9aa0e81c052ade930bf6377cb9.jpg" width="530" height="212" />    </div>    <p><br /> <strong>13、<a href="/misc/goto?guid=4958187163129736541" target="_blank">Contactable</a></strong> <br /> <br /> 一个方便易用的联系表单插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/292db72aa3ed32d23cf868b8e4851dc1.jpg" width="530" height="108" />    </div>    <p><br /> <strong>14、<a href="/misc/goto?guid=4958335169979003547" target="_blank">jQuery UI Slider from a Select Element</a></strong> <br /> <br /> 使用该插件，用户既可以从下拉列表中选择开始与截止日期，也可以拖动滑块来选择。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/ed40fa934a6080a0a3c5ee34e9f0aa53.jpg" width="530" height="212" />    </div>    <p><br /> <strong>15、<a href="/misc/goto?guid=4958335170772524390" target="_blank">快捷键</a></strong> <br /> <br /> 该插件允许你在代码中很方便地添加或移除键盘事件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/253477a5091dddbfc9172d3e8f8d22f7.jpg" width="530" height="170" />    </div>    <p><br /> <strong>16、<a href="/misc/goto?guid=4958335171566761296" target="_blank">jQuery复选框</a></strong> <br /> <br /> 用于在JavaScript被禁用时，显示复选框的状态。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/7e2a34ea06f70b990873a38b88571a9a.jpg" width="530" height="212" />    </div>    <p><br /> <strong>17、<a href="/misc/goto?guid=4958335172387174871" target="_blank">PrettyCheckboxes</a></strong> <br /> <br /> 此插件会让你的复选框更加醒目。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/f915d945a6752c2f8a4e1b8ac5554bb6.jpg" width="530" height="286" />    </div>    <p><br /> <strong>18、<a href="/misc/goto?guid=4958335173170795434" target="_blank">jQuery验证插件</a></strong> <br /> <br /> 一个在提交表单时显示提示信息的验证插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/0edb035774437b3f24fe8f9fc3cfe8e2.jpg" width="530" height="271" />    </div>    <p><br /> <strong>19、<a href="/misc/goto?guid=4958187159468638681" target="_blank">LightForm</a></strong> <br /> <br /> A form that combines FormCheck2 for fields validation and NiceForms to style tech fields and textareas. <br /> <br /> 该表单整合了用于验证字段的FormCheck2插件以及用于美化字段和输入框的NiceForms插件。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/1c1a3d1ce9c732720592235cf8270353.jpg" width="505" height="245" />    </div>    <p><br /> <strong>20、<a href="http://fuelyourcoding.com/scripts/infield/index.html?username=1%E9%98%BF%E6%96%AF%E8%BE%BE&password=as1" target="_blank">In-Field Labels</a></strong> <br /> <br /> 当输入框被选中时，输入框里的标签开始慢慢退色直至消失。 <br /> </p>    <div style="text-align:center;">     <img alt="20个jQuery插件，帮你打造完美网页表单" src="https://simg.open-open.com/show/e54c39a67cdfcf3918e9ea8961e0e446.jpg" width="425" height="200" />    </div>    <p><br /> 英文原文：<a href="/misc/goto?guid=4958335175511212533" target="_blank">20 Useful jQuery Plugins to Work With HTML Forms</a><br /> 本文转载自: <a href="/misc/goto?guid=4958335176299780094" rel="nofollow" target="_blank">http://www.iteye.com/news/24708</a></p>