Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
Hour 10. Formulating Your Forms > Enhancing Forms with jQuery Mobile
Enhancing Forms with jQuery Mobile
jQuery Mobile has exceptional support for forms on mobile devices. Each element has been restyled to be accessible and easily usable on a mobile device. Keep in mind that some of the form styles vary slightly depending on the platform and mobile browser that you are using.
Standard Input Elements
To give you an idea of just how jQuery Mobile handles the look and layout of forms let’s update the code we used in Listing 10.1 to include jQuery Mobile. Listing 10.2 shows the content of jqm_simple_form.html.
Listing 10.2 The Simple Form Updated to Use jQuery Mobile
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Forms with jQM</title>
5: <meta name="viewport" content="width=device-width, initial-scale=1">
6: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
7: <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
8: <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
9: </head>
10: <body>
11: <div data-role="page">
12: <div data-role="header"><h1>Forms with jQM</h1></div>
13: <div data-role="content">
14: <form id="login" name="login" action="login.php" method="POST">
15: <label for="username">Username: </label>
16: <input type="text" name="username" id="username" value="" /><br />
17: <label for="password">Password:</label>
18: <input type="password" name="password" id="password" value="" /><br />
19: <input type="hidden" name="hiddenInput" id="hiddenInput" value="secret message" />
20: <input type="submit" name="loginSubmit" id="loginSubmit" value="Login" />
21: </form>
22: </div>
23: </div>
24: </body>
25: </html>
