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.

Tags: jQuery, learnable
Lee has spent the past twenty years working at the intersection of journalism, academics and technology, amassing a broad array of experience producing and teaching with digital media. He has been a manager, teacher, trainer, producer and coder, and specializes in quickly adopting and synthesizing new technologies to create content and content management processes for a variety of media. He is currently an academic technologist at Emory University, charged with producing Massive Open Online Courses (MOOCs) on the Coursera platform and managing the university’s WordPress and Google Search Appliance services.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

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

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!