10+ JQuery tutorials for working with HTML forms

by Jean. 48 Comments -

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

Comments (48) - Leave yours

  1. wade said:

    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.

  2. jcargoo said:

    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,

  3. Sebastian said:

    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… ;-)

  4. Alberto Giro said:

    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.

  5. Web Designing said:

    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!

  6. Lam Nguyen said:

    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/

  7. Wheelchair Guide said:

    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. Joghn Secada said:

    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…

  9. uberVU - social comments said:

    Social comments and analytics for this post…

    This post was mentioned on Twitter by Elie_P: RT @ManiKarthik: 10+ JQuery tutorials for working with HTML forms http://bit.ly/LYz4m RT @andysowards: RT @catswhocode…

  10. TechDaring said:

    Thank you for ten jquery tips. I’m practice it right now. But I wondering if you have anyway to fix when you get conflict between jQuery and Mootools ? I havenot any idea to fix.

  11. Wilson said:

    Thank you for this resources, I searched you through google looking for a quick way to use JQuery quickly with a form I am implementing with my website. JQuery really rocks! I’ve been a former prototype user but now I switched to JQuery not because Prototype is no good but because their documentation sucks full of ambiguity and unclear instructions.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!