Total Followers 132,503
Forms are very important part of any website, whether it is sign up form, log in form or comment form. These forms are source of interaction between your website and its users. For example if anyone is signing up on your website it will be his/her first experience working on your website and it is said “First Impression Is Last Impression”; if users see your sign up form very elegantly and creatively designed they will have good first impression about your website. Same in the case of all other forms; which play the important role in the success of your website. Today we have rounded up a bunch of jQuery Plugins, Tutorials and Resources which will aid and facilitate you in enhancing the beauty of the various forms present on your website.
In this tutorial you will learn to turn any web form into a wizard with the help for jQuery. You can turn one long and ugly-looking form into steps wise wizard. Each step can be semantically divided into field-sets. Each field-set would clearly describe each group of fields. It is a very lightweight script which works in all major browsers like Chrome, Firefox, Safari, opera and IE. If you are still confused about its functionality you can check this DEMO.
If you have ever created a simple web form without using “Tables” then you should have faced the problem of alignment, the input box starts straight after the heading making the form ugly. Using this script you can justify elements.
If you are sick and tired of you outdated drop down then this script will let you add extra beauty and grace in it. Using this script you can add an icon with each option, adding more interaction and elegance in drop downs.
This jQuery plugin will validate the password which the user has desired about. This plugin provides two components, one is the rating of passwords, like if user is entering very simple password it will be rated as WEAK, if user have entered a combination of mixed characters then it will be rated as STRONG. Second functionality is about confirming whether both passwords entered are matching or not.
This script will help you to validate the inline form easily. When an error occur it create a DIV and position it in the top right corner of the input field. There are no images needed because the rounded corners and shadows are done with CSS3 and degrade well in resistant browsers.
Previewing before submission is an awesome way to let user know whether he/she is entering correct information or not. This script uses jQuery to preview the comment which user is submitting. You can implement this tutorial in forms too, which will facilitate the users in finding their mistakes and correcting them. Here is a live DEMO, demonstrating how it works.
jQuery “Highlight” plugin increases usability of any form by highlighting the elements as you interacts with the it. This plugin highlights the field on the form in which you are typing making it more elegant and visible. It can be used in tables and lists also. Here is a live DEMO which will clarify its functions.
This is a very simple a helpful jQuery plugin. It is developed looking at the importance of telling user what is the expected from him to fill in the specific field. This plugin becomes very handy when user has to fill a complicated form. For example if user is typing in the “Name” field this plugin will display help in a separate DOM element that “Enter your name”.
NiceForms is a script enables you to replace the most commonly used and boring form elements with custom designed elements. It contains a default theme that can be used or you can also develop you own theme if you want to be more unique.
Every form contains simple and outdated HTML checkboxes. This plugin will replace these checkboxes with new and graceful checkboxes and help you to add extra beauty to your form. It can support popular browsers including Firefox, IE, Opera and Safari.
This is a lightweight jQuery script that previews the content of textarea in a pop-up window before the submission of the forms or comments. It is very useful in blog comments to avoid page loads. You will have to add your own CSS files to add styles in this ModalPreview Script.
Most of comment forms are very small in size for long comment. This jQuery plugin will make the comment box to stretch with respect to the length of comment so that full comment is visible all the time, making reading and editing the whole comment easier before submitting.
You would have noticed if you try to embed image buttons with the form fields it displays outside the fields. This script will enables you to make image buttons a part of input field. You can view this DEMO which will help you to understand the features of this script.
This small jQuery plugin is of great use. It turns formatted HTML forms into forms with in-field label support. When the field is focused or clicked, labels fade and they disappear as you start entering text in it. It works in IE6+, Safari, Chrome and Firefox 2+. It has one drawback; Auto-Complete can cause problems in hiding the labels. But you can use autocomplete=”off” on the input elements as a remedy.
Strength meter is necessary for every sign-up form. This Password Strength Meter is developed using jQuery which provides a smart algorithm for detecting the strength of password. You can download this plugin from this LINK for free.
jQuery Keypad is a very useful plugin which attaches a pop-up keyboard to a text field for entry using mouse. You can add inline keypad in a span or division. It provides more secure entry for sensitive fields like passwords. It works for both input fields and text areas; you can customize it as per your wish like show/hide animation or changing its styling.
Uploadify is a multiple file upload plugin for jQuery, requires Flash and any backend development language, that allows you to upload single or multiple files on your website. Its basic execution is very simple that even non-coders can do with ease; it also has an array of options allow for full customization for advanced users.
In this tutorial you will learn to create a splendid sliding Login Form using jQuery. It solves the problem of displaying surplus information on every page having very little space to hold all of it. For example; A Login Form. You will learn to make the content accessible on every page but keep it hidden until needed for example a top Login panel which will be disclosed when clicked using jQuery, HTML and CSS.
Creating an attractive user interface (UI) is a dark dream for web developers as it is very time-consuming. To solve this problem we have jQuery UI which makes creating user interface much easier without wasting your precious time. In this tutorial you will learn to enhance a form using jQuery UI.
Auto-completion is necessitated for fast form filling. This plugin enable users to quickly find and select some value, leveraging filtering and searching. This plugin can also be used to enter previous selected values for example to complete an address or for suggesting tags. When we type something in the field the plugin starts searching for matching entries and displays a list of corresponding values in a drop down menu from which we can select the desired value.
Using this jQuery plugin selecting checkboxes has become very easy. If you have to select multiple checkboxes and they are in the same row/column then you just have to press SHIFT, select starting checkbox and ending checkbox. All the checkboxes between them will be selected. Here is a DEMO if anything is not cleared yet.
This is another jQuery plugin for validation of forms. You can customize it with the values you require. For example if you want to set the minimum value of username as 5 digits, you can do it and if user enters username less than 5 digits it will notify that username should be at least 5 digits. Same in the case of password, email etc.
Often you need to limit textarea as well as text input field. You can limit input field box but this option is not available for textarea but using this plugin you can limit the number of characters that can be entered in the textarea.
That’s all for this post, if something is missing then feel free mention in the comments.
Get The Only Freelancer crash course you will ever need to read!
Taimur here, who spent 19 years of my life doing nothing but study. An year back started blogging and it happened to be the best thing ever happened to me, I found what I want to do in spare time. Got lot of exposure and experience about my personal, professional and social life in past 1 year, all because of Blogging. On December, 14th 2010 I turned 20, want to be an accountant, doing ACCA (UK) and part-time Blogging. Living happily with my family in Lahore, Pakistan. Love coffee, adore photography and addicted to music. Owner of Designer's Terminal and AddictiveFonts. You can also follow me on Twitter
Tuesday, December 13th, 2011 04:35
can u please tell me how to bind a jquery grid in mvc?rply me soon it will be very helpfull
Monday, July 25th, 2011 10:17
Awesome post ,it’s a fabulous site
Wednesday, June 1st, 2011 20:50
Trying to keep track of all these passwords is the suck. :(
Sunday, August 8th, 2010 14:15
Great site.. equally great post ! This is my first time here and everything makes we want to come back and check it out EXCEPT the lazy image loading.. man, that is the most annoying thing since glass/glossy buttons..! :O
Tuesday, July 20th, 2010 01:15
Awesome list. I can certainly benefit from a lot of these tutorials. Thanks for the post =D
Monday, July 19th, 2010 22:51
Nice list.
Room for #31?
See my jQuery increment plugin – quite handy for numeric inputs like quantities, hours, etc.
http://sean-o.com/increment
Monday, July 19th, 2010 09:37
Awesome Collections
Monday, July 19th, 2010 02:43
Wow this is an awsome list, it would take a week to look into all of them. Thanks for the round-up!
Monday, July 19th, 2010 06:26
Awesomeness! Thanks!
Monday, July 19th, 2010 06:14
I needed some of these things yesterday for an application, but even then its a useful collection for future reference! Thanks :)
Monday, July 19th, 2010 03:19
A handful of those are just what I needed and the rest look interesting as well. I only recently started using jQuery and I’m still exploring so thank you for this list.
Sunday, July 18th, 2010 20:37
A very nice and informative article ! Will be there in my Bookmarks always … :)
Regards,
H.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Hardik Shah [Guru]
Sunday, July 18th, 2010 20:37
A very nice and informative article ! Will be there in my Bookmarks always … :)
Regards,
H.
Darren
Monday, July 19th, 2010 02:43
Wow this is an awsome list, it would take a week to look into all of them. Thanks for the round-up!
ChrisJ.
Monday, July 19th, 2010 06:26
Awesomeness! Thanks!
Abhishek
Monday, July 19th, 2010 06:14
I needed some of these things yesterday for an application, but even then its a useful collection for future reference! Thanks :)
Dom
Monday, July 19th, 2010 03:19
A handful of those are just what I needed and the rest look interesting as well. I only recently started using jQuery and I’m still exploring so thank you for this list.
Manoj
Monday, July 19th, 2010 09:37
Awesome Collections
Sean O
Monday, July 19th, 2010 22:51
Nice list.
Room for #31?
See my jQuery increment plugin – quite handy for numeric inputs like quantities, hours, etc.
http://sean-o.com/increment
divya
Tuesday, December 13th, 2011 04:35
can u please tell me how to bind a jquery grid in mvc?rply me soon it will be very helpfull
vipul
Monday, July 25th, 2011 10:17
Awesome post ,it’s a fabulous site
Melissa
Wednesday, June 1st, 2011 20:50
Trying to keep track of all these passwords is the suck. :(
Nelson Pacheco
Tuesday, July 20th, 2010 01:15
Awesome list. I can certainly benefit from a lot of these tutorials. Thanks for the post =D
Jim
Sunday, August 8th, 2010 14:15
Great site.. equally great post ! This is my first time here and everything makes we want to come back and check it out EXCEPT the lazy image loading.. man, that is the most annoying thing since glass/glossy buttons..! :O