Creating mobile-compatible forms

jQuery Mobile provides a wide array of form components that are similar to the jQuery UI offering but optimized for mobile devices. This recipe provides examples of the more commonly used form elements so that you can re-use them at your convenience.

Getting ready

Within the chapter10 folder you created earlier, create recipe-8.html.

How to do it…

To learn what form elements are made available by jQuery Mobile and how to use them, perform each of the following steps:

  1. Create a simple jQuery Mobile website to hold all the examples. Add the following HTML code to recipe-8.html:
    <!DOCTYPE html> <html> <head> <title>Chapter 10 :: Recipe 8</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link ...

Get jQuery 2.0 Development Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.