55个jQuery表单美化/增强插件

     作web开发的人都知道，浏览器默认的表单样式，其实是很难看，很古板的，无论设计多优秀的页面，一旦使用这样的表单，设计效果无疑要大大折扣的。下面这55个jQuery表单(Form)插件，有些可以用于美化表单，有些可以用于增强表单现有的功能。    <p><a href="/misc/goto?guid=4958187137363906979"><b>Niceforms v2</b></a></p>    <p><img alt="Niceforms v2 jquery form plugin" src="https://simg.open-open.com/show/d4cad7d9985ebcf01bad77bd6fdb6560.jpg" /></p> Niceforms是一个基于Javascript的控件，它用个性设计的内容替代最常用的表单元素。从本质上改变了浏览器默认的呆板的表单形式。    <p>您可以使用Niceforms提供的默认的主题，你也可以基于它来开发自己的表单效果。 Niceforms体积比较小，而且支持大多数浏览器（IE7+,Firefox2+等等），不过不支持IE6。用来做注册、登录等界面还是挺不错的。<br /> </p>    <p><a href="/misc/goto?guid=4958187138096692894"><b>In-Field Labels jQuery Plugin</b></a></p>    <p><img alt="In-Field Labels jQuery form Plugin" src="https://simg.open-open.com/show/382a344799f06bf8ffc706597e5237c8.jpg" /></p>    <p>In-Field Labels jQuery插件是一个可以使普通输入框内显示默认信息，当用户开始输入时，输入框中默认显示的文字自动消失的插件，可以避免填入的value值。</p>    <p>目前支持的浏览器：IE6+IE6+, WebKit Browsers (Safari, Chrome), Firefox 2+（其中需要注意的是IE6需要设置输入框的label的颜色）。<br /> </p>    <p><a href="/misc/goto?guid=4958187138847656702"><b>Create a Progress Bar With Javascript</b></a></p>    <p><img alt="Create a Progress Bar With Javascript jQuery form Plugin" src="https://simg.open-open.com/show/97fed3dc80f66c26f2886d6ea9fe3513.jpg" /><br /> 大家可以其名字可以看出来这是一个用于创建进度条的jQuery插件，拥有百分比变化提醒。</p>    <p> </p>    <p><a href="/misc/goto?guid=4958187139574740081"><b>Changing Form Input Styles on Focus with jQuery</b></a></p>    <p><img alt="Changing Form Input Styles on Focus with jQuery" src="https://simg.open-open.com/show/80fe1a3a27f0b39989c3486d31388880.jpg" /><br /> 这是一个用于增强表单元素的jQuery插件，当某个元素被选中时，将高亮显示该元素。<br /> </p>    <p><a href="/misc/goto?guid=4958187140315026115"><b>jqTransform</b></a></p>    <p><img alt="jqTransform jQuery form plugin" src="https://simg.open-open.com/show/6911ed3b0da56e3d47896f6cb416275b.jpg" /><br /> 这是一个能够改变表单元素样式的jQuery插件。</p>    <p><a href="/misc/goto?guid=4958187141054449020"><b>A fancy Apple.com-style search suggestion</b></a></p>    <p><img alt="A fancy Apple.com-style search suggestion jQuery form plugin" src="https://simg.open-open.com/show/a680209c5b886e5db12b9a44ab84a557.jpg" /></p> 这是一个类似苹果网站上提供的搜索建议控件。    <br />    <br />    <p><a href="/misc/goto?guid=4958187141776604599"><b>Using form labels as text field values</b></a></p>    <p><img alt="Using form labels as text field values jQuery form plugin" src="https://simg.open-open.com/show/f3c671f7eaa05d947fc34799f42dea40.jpg" /><br /> 这插件用于将表单标签说明直接放在输入框入，以节省空间。<br /> <br /> <a href="/misc/goto?guid=4958187142531486399"><b>A jQuery inline form validation, because validation is a mess</b></a></p>    <p><img alt="A inline validation jQuery form plugin" src="https://simg.open-open.com/show/48ab2c77f5136605348547227b4f7b6c.jpg" /><br /> 这是一个表单输入校验插件，用气泡框的形式显示输入或错误提醒。<br /> <br /> <a href="/misc/goto?guid=4958187143259359814"><b>Build An Incredible Login Form With jQuery</b></a></p>    <p><img alt="Build An Incredible Login Form With jQuery form plugin" src="https://simg.open-open.com/show/74ced7832901814e2a940d20d7a2a20a.jpg" /><br /> 用于创建一个隐藏的用户登录表单，当点击某个按纽时才显示。<br /> <br /> <a href="/misc/goto?guid=4958187143985958081"><b>Clearfield</b></a></p>    <p><img alt="CLEARFIELD jQuery form plugin" src="https://simg.open-open.com/show/5f304e88444bd1a8f5c56c1c5d6cf67c.jpg" /><br /> 同样是一个直接在输入框中内置输入说明的jQuery插件。<br /> <br /> <a href="/misc/goto?guid=4958187144732138446"><b>How to Add Auto Complete to Your Google Custom Search Engine</b></a></p>    <p><img alt="Auto Complete to Your Google Custom Search jQuery form plugin" src="https://simg.open-open.com/show/0969c877c582965553c53bd3f7f89494.jpg" /><br /> 一个教程将教你如何为你的自定义Google搜索引擎添加搜索建议的功能。<br /> <br /> <a href="/misc/goto?guid=4958187145479401619"><b>Justify elements using jQuery and CSS</b></a></p>    <p><img alt="Justify elements jQuery form plugin" src="https://simg.open-open.com/show/1d667dcee297c62bf9969041986d05c5.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187146222096560"><b>Perfect signin dropdown box likes 推ter with jQuery</b></a></p>    <p><img alt="Perfect signin dropdown box like 推ter jQuery form plugin" src="https://simg.open-open.com/show/33c8fb5a2fa96a8a3376f9b7d54d7696.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187146967397672"><b>Autocomplete</b></a></p>    <p><img alt="Autocomplete jQuery form plugin" src="https://simg.open-open.com/show/11ee05d5507d9780b798b85261835d7f.jpg" /><br /> <br /> <strong><a href="/misc/goto?guid=4958187147694124589" target="_blank">jQuery Form Plugin</a></strong></p>    <p><img title="jQuery form plugin" border="0" alt="jQuery form plugin" src="https://simg.open-open.com/show/5c3e247d164c2bc23a6c2adca2bc4417.jpg" width="500" height="300" /><br /> <br /> <br /> <a href="/misc/goto?guid=4958187148442491900"><b>Checking username availability with ajax using jQuery</b></a></p>    <p><img alt="Checking username availability with ajax jQuery form plugin" src="https://simg.open-open.com/show/f6d25fc1df0d8d1fa5bdca671ea18cc9.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187149175821109"><b>A Fancy AJAX Contact Form</b></a></p>    <p><img alt="Checking username availability with ajax jQuery form plugin" src="https://simg.open-open.com/show/3c8689a9c1be05526f3a716558b54461.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187149907534150"><b>jQuery shiftcheckbox plugin</b></a></p>    <p><img alt="shiftcheckbox jQuery form plugin" src="https://simg.open-open.com/show/3c0605ac26448978773128f86383749d.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187150630466166"><b>jQuery Comment Preview</b></a></p>    <p><img alt="Comment Preview jQuery form plugin" src="https://simg.open-open.com/show/f3d823611e52b5d39214f59a2020917a.jpg" /></p>    <p><a href="/misc/goto?guid=4958187151372388676"><b>jQuery “Highlight” plugin</b></a></p>    <p><img alt="Highlight jQuery form plugin" src="https://simg.open-open.com/show/0b18d4ff13138e956d3573598510c09c.jpg" /></p>    <p><br /> <a href="/misc/goto?guid=4958187152096504688"><b>Select Multiple Form Fields</b></a></p>    <p><img alt="Select Multiple Fields form plugin" src="https://simg.open-open.com/show/3f9b646663f33cc2eb593e06566e804c.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187152837500887"><b>AJAX Upload</b></a></p>    <p><img alt="AJAX Upload jquery form plugin" src="https://simg.open-open.com/show/6aad438d19577e53e641141e4ec33021.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187153563152311"><b>A Fancy AJAX Contact Form</b></a></p>    <p><img alt="A Fancy AJAX Contact jquery form plugin" src="https://simg.open-open.com/show/57967be1a52b5e0471052699e5df4c2d.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187154301425719"><b>meioMask – a jQuery mask plugin</b></a></p>    <p><img alt="meioMask jquery form plugin" src="https://simg.open-open.com/show/987fd54391d8807102c545c0cd70e7ca.jpg" /></p>    <p><a href="/misc/goto?guid=4958187155050873930"><b>Improved Current Field Highlighting in Forms</b></a></p>    <p><img alt="Improved Current Field Highlighting in Forms jquery form plugin" src="https://simg.open-open.com/show/51a45a5f2b1abca2242195bd79873150.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187155783489415"><b>LiveValidation</b></a></p>    <p><img alt="LiveValidation jquery form plugin" src="https://simg.open-open.com/show/ab0eac0e074c85608883122f3717de73.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187156515559354"><b>Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties</b></a></p>    <p><a href="/misc/goto?guid=4958187157251358784"><b><br /> watermarks for inputfields</b></a></p>    <p><img alt="Watermarks for inputfields jquery form plugin" src="https://simg.open-open.com/show/f3265c299fc3cde43a1a376cc31079ba.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187157986503227"><b>Elastic – Make your textareas grow 非死book style jQuery plugin</b></a></p>    <p><img alt="Elastic – Make your textareas grow 非死book style jquery form plugin" src="https://simg.open-open.com/show/ce65540830bedd95b28f5b962ee6e7f7.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187158727878072"><b>Password Validation</b></a></p>    <p><img alt="Password Validation jquery form plugin" src="https://simg.open-open.com/show/3f0f0dde089d36b8b05a1ba021d91aae.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187159468638681"><b>LightForm</b></a></p>    <p><img alt="LightForm jquery form plugin" src="https://simg.open-open.com/show/b51ba6e12a61845a3f2704e56b605cd6.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187160208429953"><b>Advanced Form Validation</b></a></p>    <p><br /> <a href="/misc/goto?guid=4958187160936903168"><b>Auto Complete</b></a></p>    <p><img alt="Auto Complete jquery form plugin" src="https://simg.open-open.com/show/a4a60cbe9e2f491b0c103046ed852d64.jpg" /><br /> <br /> <br /> <a href="/misc/goto?guid=4958187161671721951"><b>Masked Input Plugin</b></a></p>    <p><img alt="Masked Input jquery form plugin" src="https://simg.open-open.com/show/7abb326490ed43847686bc0101cb44a4.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187162401470680"><b>Uploadify</b></a></p>    <p><img alt="Uploadify jquery form plugin" src="https://simg.open-open.com/show/33370f3796648d6b9b857b73b3ee5e44.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187163129736541"><b>Contactable</b></a></p>    <p><img alt="Contactable jquery form plugin" src="https://simg.open-open.com/show/9f064f07edc05411fbe8449cfaab7d2c.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187163874812080"><b>Make image buttons a part of input fields</b></a></p>    <p><img alt="Make image buttons a part of input fields jquery form plugin" src="https://simg.open-open.com/show/072d842d87c784e38a977960dfd1f00c.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187164602284385"><b>JavaScript image combobox</b></a></p>    <p><img alt="JavaScript image combobox jquery form plugin" src="https://simg.open-open.com/show/dbf6ed297388aaf9f7b992c5c8e7d497.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187165339251293"><b>jQuery checkbox v.1.3.0 Beta 1</b></a></p>    <p><img alt="jQuery checkbox v.1.3.0 Beta 1 jquery form plugin" src="https://simg.open-open.com/show/31f95843d72e92223dc1ef9f2f2f38b8.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958185227723190599"><b>Radiobutton and Checkbox-Replacement</b></a></p>    <p><img alt="Radiobutton and Checkbox-Replacement jquery form plugin" src="https://simg.open-open.com/show/eaec654f90c347faf1bfc3e3ceb83241.jpg" /></p>    <p><a href="/misc/goto?guid=4958187166744912093"><b>Datepicker</b></a></p>    <p><img alt="Datepicker jquery form plugin" src="https://simg.open-open.com/show/2ef4b642c0b9483f325de457048413cd.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187167486651165"><b>Date Picker</b></a></p>    <p><img alt="Date Picker jquery form plugin" src="https://simg.open-open.com/show/ae471b1f30427a26626246dba59d7154.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187168220674950"><b>New jQuery plugin targeting usability for password masking on forms</b></a></p>    <p><img alt="usability for password masking jquery form plugin" src="https://simg.open-open.com/show/802567f065237dba508e0b0154dd4560.jpg" /></p>    <p><a href="/misc/goto?guid=4958187168954132702"><b>ToggleVal 3.0</b></a><br /> <br /> <a href="/misc/goto?guid=4958187169687939989"><b>jQuery magicpreview plug-in</b></a></p>    <p><img alt="magicpreview jquery form plugin" src="https://simg.open-open.com/show/3987ba8f1907031bd654f88de3bea4a8.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187170430768455"><b>Submit A Form Without Page Refresh using jQuery</b></a></p>    <p><img alt="Submit A Without Page Refresh jquery form plugin" src="https://simg.open-open.com/show/13832c44bb2d8365fc102c5ea1fe2881.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187171165145072"><b>Selecting Multiple Select Form Elements on the Fly</b></a></p>    <p><img alt="Selecting Multiple Select Elements on the Fly jquery form plugin" src="https://simg.open-open.com/show/323ba8b2f75d8a2b92d510c2287d3859.jpg" /></p>    <p><a href="/misc/goto?guid=4958187171893929521"><b>Creating a Digg Style Sign Up Form</b></a></p>    <p><img alt="Creating a Digg Style Sign Up jquery form plugin" src="https://simg.open-open.com/show/14d8ea086fb357fa96a1c7e7d112767f.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187172643783642"><b>Enlarge input fields on focus</b></a></p>    <p><img alt="Enlarge input fields on focus jquery form plugin" src="https://simg.open-open.com/show/10a4f0e01805c729f882313601aff7a8.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187173374026360"><b>jQuery AlphaNumeric</b></a></p>    <p><img alt="AlphaNumeric jquery form plugin" src="https://simg.open-open.com/show/fd345f1fb81be1a0951732fe63f0daba.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187174107068630"><b>Password Strength Indicator and Generator</b></a></p>    <p><img alt="Password Strength Indicator and Generator jquery form plugin" src="https://simg.open-open.com/show/f9f234eb25c1c0e604e6c571228be4e0.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187174849025226"><b>jquery – asmselect</b></a></p>    <p><img alt="asmselect jquery form plugin" src="https://simg.open-open.com/show/27d8666a62a17f6c6a1bd3bfc6ae60b5.jpg" /></p>    <p><a href="/misc/goto?guid=4958187175584580240"><b>jQuery Form Field Validation Plugin</b></a></p>    <p><img alt=" Field Validation jquery form plugin" src="https://simg.open-open.com/show/6c027236006ed420e0166b6d6ebee88e.jpg" /><br /> <br /> <a href="/misc/goto?guid=4958187176316074555"><b>Advanced Form Styling & Functionality</b></a></p>    <p><img alt="Advanced Styling and Functionality jquery form plugin" src="https://simg.open-open.com/show/167add28ed5343368eaa62f10c1320bc.jpg" /><br /> 原文：<a href="/misc/goto?guid=4958187177055614231">http://www.designyourway.net/blog/resources/55-jquery-form-plugins-to-download-and-use/</a><br /> <br /> <br /> </p>