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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.