Home arrow JavaScript arrow More of the Top jQuery Plugins for Forms
JAVASCRIPT

More of the Top jQuery Plugins for Forms


Itís been a long time since we highlighted some of the best jQuery plugins for forms. While the previous list of ten plugins offered some very useful tools to help enhance your siteís forms, there are so many more on the Web that are worth mentioning. After all, forms are a vital part of each site, so enhancing their look and functionality is a great way to create an improved experience for your visitors. With that being said, here are more of the top jQuery plugins for forms, in no particular order.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
February 28, 2012

print this article
SEARCH DEVARTICLES

Itís been a long time since we highlighted some of the best jQuery plugins for forms. While the previous list of ten plugins offered some very useful tools to help enhance your siteís forms, there are so many more on the Web that are worth mentioning. After all, forms are a vital part of each site, so enhancing their look and functionality is a great way to create an improved experience for your visitors. With that being said, here are more of the top jQuery plugins for forms, in no particular order.

jQuery Impromptu



jQuery Impromptu is described as a way for you to improve your forms by implementing spontaneous prompts for user input.  In essence, it provides a guide for users as they fill out forms and makes for an overall better user experience.  Impromptu can be used to replace standard alerts, prompts, or confirmations that youíll usually find in forms.  It has quite a few options packed into its feature set, making it a solid jQuery plugin for you to add to your forms arsenal.  As for examples of where it could be used, add it to a finance calculator form.  If a visitor types in an incorrect dollar amount, the form will ask them to revise their input.  This helps them from going through the trouble of filling out the form, submitting the info, and getting an error.  Instead, if any errors are committed during the input process, the form will let them know, allow them to correct the error, and move on to the next field.

Link: http://trentrichardson.com/Impromptu/index.php

In-Field Labels jQuery Plugin

If you are looking for a way to add helpful instructions to your forms, inserting labels into the fields is a great method.  The In-Field Labels jQuery plugin gives you such capability in a lightweight, cross-browser compatible manner.  The plugin converts HTML forms into ones that support in-field labels, meaning you can add a descriptive word in each field to help visitors know what type of data they must input.  If the field is focused on, its label will fade.  Once input is entered into the field, the label will disappear automatically.  If a field is cleared, the label will appear once again, giving the form added functionality that is also smooth.

Link: http://fuelyourcoding.com/scripts/infield/

jQuery Checkbox

The likelihood of some of your forms having checkboxes is quite high, and this plugin specializes in giving you control over the customization of your checkboxesí design.  The plugin is lightweight, works well across the major browsers, and supports dynamic skin changing.  You can go for a classic Safari look for your checkboxes, or use radio buttons to make more of an impression.  Another added perk is the pluginís support of label hovering, so when you hover over a specific checkbox, it becomes highlighted.  This offers a more user-friendly and eye-catching experience if a visitor is using a form with various sections.

Link: http://widowmaker.kiev.ua/checkbox/

prettyCheckboxes

As its name would suggest, the prettyCheckboxes plugin deals strictly with checkboxes.  The script prevents you from losing any regular input usability and is ideal for those who want to revamp the look of their checkboxes while maintaining consistency across browsers.  Some of the options include custom checkboxes or radio buttons, as well as inline radio buttons that would fit in nicely with any type of site.

Link: http://www.no-margin-for-errors.com/projects/prettyCheckboxes/

Pretty Checkboxes with jQuery



Here is yet another plugin that deals with form checkboxes.  Actually, itís more of a tutorial, but you should be able to implement it easily to get the final intended result, and its inclusion in the list was hard to pass up.  The checkboxes produced are quite different from most conventional checkboxes you will find, which can help your site stand out from the crowd.  They might not fit in well on a site with a lot of content or particularly lengthy and in-depth forms, but if your site is visually stimulating and you want to make its forms even better, this plugin should do.

Link: http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery

autoResize

The autoResize plugin can come in handy if your site has a form that asks for user feedback, such as comments.  Since some users may have more to say than others, you may not want to put a limit on how much they can write.  Thatís where autoResize comes into play, as it automatically resizes the field according to the amount of text being entered.  This is useful because it allows the user to see what they have typed without cramping their space.  The plugin comes with various options that you can tweak to make the resizing function fit your exact needs.  For instance, you can set a textarea limit where the field will stop expanding, and you can also adjust the duration of the resizing animation.

Link: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

File Style Plugin for jQuery

The File Style plugin lets you take control over the look of your formsí file inputs.  This is obviously a feature that works well on sites where users can upload files, and it takes the mundane look out of the standard buttons you will usually find to do so.  In short, File Style addresses the problem of browsers not allowing you to style file inputs.  You can select the image of your choice to serve as the browse button, and you also have the option of styling the filename field.

Link: http://www.appelsiini.net/projects/filestyle

jQuery Highlight
 



One easy way to make your forms more user-friendly is by adding a highlighting feature.  Just think about how it is when you are looking at a form with several elements.  Itís much easier to work with if the elements become highlighted as you go, and that is what this plugin does.  It not only highlights each field, but also the areas to the left and right of it for extra visibility and clarity.  The plugin works with more than just forms, however, as you can also employ it with any tables or lists you may have.

Link: http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By wubayou


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials