
10+ JQuery tutorials for working with HTML forms
Forms are definitely one of the most important part of a website, because it is used for interaction between you and your readers. Among other tools, JQuery can help you to enhance your html forms functionality.
Submit A Form Without Page Refresh using jQuery
Submitting a form with refreshing the page have many good points: For example, if the person forgot to fill a field, he’ll have a notice but he’ll not have to re fill all the form fields again.
This tutorial will help you creating a form that can be submitted without page refreshing, using JQuery.

Read tutorial
Form validation with jQuery from scratch
Good validation of forms is extremely important, because of course you don’t want people to be able to send any kind of data. JQuery can help you lots with form validation, and this tutorial will tell you how to build a JQuery form validation from scratch.

Read tutorial
Improved Current Field Highlighting in Forms
Both visually and pratically, forms are often a neglected part of a website. CSS expert Chris Coyier have written this nice tutorial, which will tell you how to improve your form usuability and enhance them visually.

Read tutorial
A jQuery inline form validation, because validation is a mess
Another good article to learn about “inline validation”, the process of validating a form with refreshing the page. A must read, especially if your site have several long (and boring) forms.

Read tutorial
AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL
Ajax have bring lots of new awesome possibilities to Web Developers. One of them if autocompletion, the process of retrieving data automatically while the user is typing. This tutorial will tell you how to create a cool text field autocompletion using JQuery.

Read tutorial
Selecting Multiple Select Form Elements on the Fly
Javascript is very good to enhance your forms usuability. Using JQuery, you’ll save a precious time and do lots of things in a simpler manner that if you where using “classic” Javascript.
This tutorial is a very good example of JQuery’s power when it comes to forms.

Read tutorial
Build An Incredible Login Form With jQuery
I definitely love that one. Have you ever seen theses websites where clients or registered users can click on a link to make a login panel appear? If you loved it, Nettuts tells you how to do it. It’s so easier that you’ll be surprised.

Read tutorial
Creating a Digg Style Sign Up Form
Although Digg may be controversial at some point, everyone agrees that their site design is tip top. Designshack created this tutorial, where you can lear to create a very nice, “digg-style” sign up form.

Read tutorial
Enlarge input fields on focus
How can you type a long text in a 200 pixels wide textarea? If this sounds good to you, you’ll probably enjoy this article where you’ll learn how to automatically enlarge input fields at focus.

Read tutorial
WordPress contact form without a plugin, using jQuery
As I know most of my readers have a WordPress blog and generally likes to tweak it, I’m pretty sure that you’ll love to learn how to create a contact form plugin, using JQuery.

Read tutorial
jQuery Ajax Delete
Lots of tutorials tells you how to add content using Ajax, but finding great info about deleting content isn’t that easy. In this tutorial, you’ll learn how to remove content using JQuery, for a similar result than in WOrdPress dashboard, when you validate a comment in the “Pending” section.

Read tutorial




42 Comments + Trackbacks
8.10.2009
Here’s another:
http://briancray.com/2009/07/28/increase-form-usability-replace-form-button-submit/
8.10.2009
Very cool. Also, check out bestcontactform.com. They have a robust form editor and the forms track keywords and tons of other stuff, too (on each submittal). I personally haven’t used their Wordpress plugin, but a buddy of mine did and said it rocked.
8.11.2009
Hey Jean-Baptiste,
Great list thanks. I have developed a kind of validation messages for HTML form with jQuery in:
http://www.jcargoo.org/2009/04/validation-messages-for-form-fields.html
Best regards,
8.11.2009
Wonderful collection!
8.11.2009
Awesome list!
8.12.2009
The blog is very good and helped me.. ^_^
8.12.2009
Great list of usefull form additions. Every developer should at least think about making their own forms more useable, since this is the main interaction with webapplications.
I’m looking forward for more examples in the comments and maybe a “50+” article…
8.13.2009
Thank you for the information, i´m really new in this of WordPress and i´m reading a lot for make it in the best way all, and my blog is really new too, but any way every day I love this more and more.
8.13.2009
Jquery is a very usefull Tool to validate forms and some other use!i would say first your blog is best then your post is very nice which really clear me so many thing in my mind! now i can say that i understand jquery well again thanks for sharing such good knowledge!
8.14.2009
Hey there,
It’s a great list. I would like to forward you to another post that build a Login form like new Twitter homepage with jQuery
http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/
8.15.2009
Jquery is one of my favourite too. Thanks for the great list.
8.19.2009
These are a bunch of neat neat resources, I can’t wait till I have some time to check out some of these tutorials. I really like Ajax, because it can make browsing feel a lot more seamless.
8.22.2009
Amazing tutorial ! thanks man ..
I’m learning js right now, these tips will be a great help for me ..
But, is these forms accessible to SE ?
8.24.2009
Excellent Collection. I’m really new in this business, but for now I am getting well. This is a very useful thing for me.
8.27.2009
Nice collection of tutorials. All are useful.
I have added this to my favorite.
8.28.2009
Hey! Nice tuto!
Thanks a lot!
8.28.2009
Thanks for the roundup. I’m amazed at how much nicer the Web is looking now compared to just a few years ago. JQuery has played a good part in making it all easier.
9.3.2009
Nice tutorials!!!!!
Thanksss 4 sharing!
9.8.2009
I have developed a kind of validation messages for HTML form with jQuery
11.29.2009
http://plugins.jquery.com/project/JQF1
Man! Look this form style plugin! It`s the most complete form style plugin! Works at IE 6 7 8, Safari (win and mac), firefox (win and mac), Opera, Chrome…
12.21.2009
thanks, there were a couple of things in there that were really useful to me
12.27.2009
Great List. It is very useful for me . Thank you very much