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.



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

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