Chapter 3. Building complex web forms with jQuery UI
This chapter covers
- Using the jQuery UI form widgets
- Building an enhanced contact form
- Comparing the jQuery UI widgets to their HTML5 counterparts
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.
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: