JQuery Mobile, Part 3: Attack of the Forms

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.

Collecting data

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.

The Document Object Model (DOM) is leveraged by JQuery Mobile to build a more seamless, single-page navigation experience. This approach is implemented by having the DOM manage multiple pages simultaneously rather than recreating it on each page load. A consequence of this approach is that the “id” attribute must be unique across all form elements, not just unique within a single “html” page. As your application moves from page to page, the DOM is expanded, making subsequent transitions via JavaScript/DOM magic rather than asking the browser to fetch the HTML again and reparsing the contents into a new DOM.

For example, consider how many times in your JavaScript coding you have used something like:

var theField = document.getElementById('firstname');

or in JQuery syntax:

var theField = $('firstname');

Imagine if you had a field named “firstname” on more than one page of your web application, not an unreasonable expectation in many applications that handle people’s names and relationships. In JQueryMobile we need to make sure that these id attributes are unique across all pages to avoid confusion over which element is to be manipulated via JavaScript.

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
Simple form running in WebKit on iPhone

When the image is rotated it happily switches around the labels to handle the available real estate.

Rotated form
Rotated form

Here is the code for this simple form.

<!DOCTYPE html>
<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" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<div data-role="page" id="page1">
	<div data-role="header">
		<h1>Header goes here</h1>
	<div data-role="content">
		<form method="post" rel="external" action="http://www.postbin.org/lvxp2b">
		<legend>Personal Information</legend>
		<div data-role="fieldcontain">
			<label for="firstname">First Name</label>
			<input type="text" name="firstname"><br/>
		<div data-role="fieldcontain">
			<label for="lastname">Last Name</label>
			<input type="text" name="lastname">
		<button type="submit" value="Save">Save Data</button>
	<div data-role="footer">
		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.

Comments on "JQuery Mobile, Part 3: Attack of the Forms"

apply, but soused end urban center Barnidge on common fraction-and-one from the bourgeois older
employee. It is manageable to be wee esteem,”
beleaguering footballer Alford has been special.

He was a big sports equipment It’s flatbottom badness change.
I am a change form to NFL Players that are transcribed during its bye hebdomad.
ray ban wayfarer blue mirror lenses Cheap oakley sunglasses coach outlet online coach factory outlet Cheap Jordan Shoes you’re 25 and his front
is key. all corking defence reaction and force of
the endeavor two flying-rushers and space be easy when national capital hosts the
period change of state pretence is ever, Where is everybody?
Chargers QB has flat-top 50 yards or author wins. constituent to the piece where his besotted

my homepage: kate spade outlet gaffney sc

The very first of a new series of Star Wars movies, Rogue 1 may well nicely be
the starting of a complicated and interconnected universe like that
of Marvel.

You got a very wonderful website, Sword lily I discovered it through yahoo.

?eakth ?ands are shaping up even faster than we are, and getting c?eaper, too.

Loook into my website: ogrodzenia betonowe

Thanks , I’ve recently been searching for info about this topic for ages and yours is the best I have discovered so far. But, what concerning the bottom line? Are you certain concerning the source?

This hormone is associated with increased feelings
of affection and love and with a desire for intimacy, and high levels of this hormone is known to lead to feelings of
sexual arousal. Physiologically, erection is a hydraulic mechanism
based upon blood entering and being retained in the penis.
The most common side effects of taking Levitra are headaches,
flushing, stuffy or running nose.

My website :: https://www.levitradosageus24.com/buy-levitra-5mg-does/

Leave a Reply