Chapter 3. Building complex web forms with jQuery UI

Building forms with native HTML is difficult; a limited number of controls offers a limited set of functionality. In this chapter we’ll look at how the five form widgets of jQuery UI—autocomplete, button, datepicker, selectmenu, and spinner—enhance these native HTML elements and make it easy to build nontrivial forms.

To learn about the widgets and what they do, you’ll build a sample form, one that patients can use to make appointments at a local doctor’s office. No one likes visiting the doctor, and your job is to make the appointment process as easy as possible for the user.

You’ll explore new elements that appeared on the web with HTML5, many with functionality similar to the jQuery UI form widgets. We’ll compare and contrast the HTML5 elements with the jQuery UI widgets and discuss which make sense for you to use today.

Let’s get started by looking at the form you’ll build.

3.1. The challenges of building modern web forms

Let’s assume you’re a small web development company and you get an email from a US-based doctor’s office. They want to add a form to their website that allows patients to request office appointments, and they want you to do it. They list the following requirements:

3.2. Autocomplete: suggesting input options to users

3.3. Button: enhancing native buttons, inputs, and links

3.4. Selectmenu: enhancing native <select> elements

3.5. Datepicker: selecting dates from a pop-up calendar

3.6. Spinner: enhancing native <input> elements to collect numeric data

3.7. Completing the appointment form

3.8. HTML5 elements vs. jQuery UI widgets

3.9. Summary