Need to capture some data from you users? jQuery Mobile forms differ from traditional forms in a couple of ways but can save you some headaches when building your app.
In our prior articles we have introduced JQuery Mobile and begun to look at application structure. In this article we continue our look at JQuery Mobile by touching upon forms handling.
While many mobile applications are dominated by the presentation of information, we cannot escape the fact that mobile devices are ideally suited for data gathering, or data-collection.
In addition to fun things like capturing images and GPS coordinates with our mobile devices, sometimes we simply need to ask the user to enter in some information the old fashioned way — via a form.
Forms have been around since the beginning of time, it seems.
Forms for JQuery Mobile are both the “same”, and “different”, from traditional HTML-coded forms.
First, the similarities:
- You use the familiar <form method=”post” action=”someaction”> </form> syntax.
- You provide a name attribute for each element of your form.
- When the form is submitted, the data is submitted as expected to the “action” of the form.
- You can setup an “onsubmit” handler to pre-process a form submission.
JQuery Mobile forms differ in a few important ways from traditional HTML forms.
var theField = document.getElementById('firstname');
or in JQuery syntax:
var theField = $('firstname');
Adopting a naming convention would be a good idea as you set out to construct JQuery Mobile applications. Something along the lines of pagename-fieldid would provide a reasonable namespace moat to reduce the chances for clashing id values.
JQuery Mobile also makes some decisions for us when it comes time to perform the layout of a form, depending on the screen dimensions of the device. Think about it, a mobile device can readily be rotated. Users now expect applications to happily handle those rotation scenarios and react in an intuitive manner. Doing this with traditional SDK development approaches requires some particular attention to implement these features. JQuery Mobile handles these events by providing a dynamic form layout process, using the available width for forms and stacking the form “labels” when the width is insufficient to have them directly to the left of a related field.
See the image below showing an iPhone (browser powered by WebKit) displaying a simple form.
Simple form running in WebKit on iPhone
When the image is rotated it happily switches around the labels to handle the available real estate.
Here is the code for this simple form.
<title>Linux Mag JQuery Mobile Sample Form</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<div data-role="page" id="page1">
<h1>Header goes here</h1>
<form method="post" rel="external" action="http://www.postbin.org/lvxp2b">
<label for="firstname">First Name</label>
<input type="text" name="firstname"><br/>
<label for="lastname">Last Name</label>
<input type="text" name="lastname">
<button type="submit" value="Save">Save Data</button>
Footer, Copyright, etc.
Some items to note about this code sample:
- JQuery Mobile script and css includes.
- data-role attributes delineate the page, header, content, and footer sections.
- The form tag’s attributes are no different than a traditional HTML page you’ve seen for years.
- The fieldset tag element marks out the set of fields for the form, including the legend element which provides a heading for the collection of fields.
- The data-role attribute of fieldcontain delineates the individual fields.
- The use of the label tag associated with its respective input element allows labels and input fields to be rendered together in an appropriate fashion.
- There is not a bit of code or text dedicated to rotation-specific handling, yet the application handles rotation quite readily.
Regarding other form elements beyond labels and text elements, JQuery Mobile provides stylized versions of these as well. Rather than enumerating all of them here, have a look at the reference provided on the JQuery Mobile website. These elements not only look a bit different from basic HTML form elements, but they are also controlled by JQuery Mobile’s theming capabilities. The net result is that we have a powerful means of controlling the look and feel of the application. This is something that web developers have learned to expect from JQuery over the years.
That wraps up our introduction to JQuery Mobile forms. Next time we’ll have a look at handling events with JQuery Mobile.