By Lee Clontz

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.

  • 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.

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