Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL
Help

PART 5: Using jQuery Mobile > CHAPTER 30: Using jQuery Mobile Forms - Pg. 857

C H A P T E R 30 Using jQuery Mobile Forms Small screens present unique difficulties when presenting a form on a mobile device. There is little enough screen real estate available to start with, and you need to give the user form elements that are easy to manipulate by touch without creating a page that requires endless scrolling to complete. In this chapter, I show you how jQuery Mobile enhances form elements so that they are consistent with other widgets and can be readily used on a touch screen. jQuery Mobile does a lot of work automatically when the page is loaded. Many form elements are enhanced without your intervention, and Ajax is automatically used when the form is submitted so that jQuery Mobile can smoothly transition to the results returned by the server. There are, however, some useful configuration options available. One element in particular (the select element) requires special attention. You can choose between different widgets to present the element to the user, and you can neatly sidestep some issues with the native implementation of select elements. The jQuery Mobile support for forms is pretty good, but it isn't perfect. In particular, there are some minor layout issues, which means that elements laid out adjacent to one another can have different widths. These are annoying problems, but they do little to undermine the general utility of jQuery Mobile and, given the excitement about jQuery Mobile, I expect these issues to be resolved in a future release. More broadly, I recommend careful thought when you are creating forms for mobile devices. By their nature, forms are intended to gather input from users, but this can be a tedious process on a small device, especially when it comes to typing. In addition, most mobile devices don't display scrollbars when the user isn't actively scrolling through a page. This means that the user isn't always aware there are form elements just off the immediate display. To create the best possible experience for users, you need to follow some basic guidelines: · Require as little typing as you can. Where possible, use alternative widgets that allow the user to make simple touch selections, such as check boxes or radio buttons. This can reduce the range of inputs that the user can make, but it might have the effect of increasing the number of users who are willing to complete the form. Use navigation between pages to display sections of a form. This gives users a clear indication of their progress through the form and doesn't require them to speculatively scroll to see if they are missing anything. Eliminate any form elements that are not required. Mobile forms should be as streamlined as possible, and that can mean accepting less data from mobile users than you get from desktop users. · · 827