Build a Better User Registration Page with jQuery

By Lee Clontz

In this video, produced by our sister company Learnable, you’ll learn the basics of jQuery UI by turning a site registration form into a multipart, tabbed interface that works great with mouse, keyboard or touch. You’ll learn how to properly format the form’s HTML properly for jQuery UI’s tabs, how to implement a unified theme for your UI widgets and how to use jQuery buttons to traverse the form as well as some basic validation.


Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • Michael Wong

    Seems that you can use more semantic fieldset markup for the form sections instead of divs.

  • Guest

    I’m go to have to disagree on the fact the tabs are a good choice for dividing UI elements
    Especially for something like this, where you pretty much want people to go from tab 1 -> tab 4 in numeric order.
    In scenarios such as this I feel that if you must split up your UI steps are the most logical way to go.
    In the scenario you are presenting above I would keep it all together, divided into some fieldsets with a bit of air in between them, maybe with some legends. If your worried about the terms and readability i would use a link that opens a dialog window (on a tablet or mobile it would be a full-window-size dialog not unlike those used for windows 8 apps.

  • Dusty

    Short and sweet :) Great job!

  • Mohd. Mahabubul ALam

    If you haven’t done a lot with JavaScript before, this is a great place
    to step off. Web forms can really benefit from a little smart scripting,
    and here, Lee shows you how to use to j Query to add accessible, tabbed
    sections, and even a user agreement check box that needs to be checked
    before the form will be accepted. Useful stuff for most people here.

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.