How to create a jQuery Mobile Form

Here we describe Step by step How to create a jQueryMobile Form For Android and BlackBerry

In this article we build in 20 minutes a complete jQuery Mobile Form , with input types text, date, email, search, text area, select, range, Toggle Switch, check boxes, and radio buttons. This Form is for use on all kind of Mobile  : iPad, iPhone,BlackBerry, Nexus , Acer , Nokia,  etc...
This Mobile App will look like this:

And this is the manner it is displayed on an emulator:

How to create a jQuery Mobile Form 

For this post we will use the jQuery Mobile and the  jQuery Frameworks, so enter http://jquerymobile.com/ and also jQuery official web site , and copy the latest versions of the files , preferably on CDN  . Because we  will also be using a Mobile Emulator,   please refer to this short tutorial on installing the Ripple Emulator.

There is also a basic   "First jQueryMobile App" Tutorial for a more in depth explanation on the setup of the frameworks and emulator.

After you got  the frameworks URLs, refer to them at the Head of the HTML5 file:

Add a data-role="page" for setting our web Page, and a data-role="header" fixed, with a NavBar :

Now we create a data-role="page" with class ui-content to hold our Form:

First we added several input fields with its labels, of many input types, like search, text, email,date, and text area.

Then we create a dropdownlist as follows:

Native menu false tells todisplay exactly the same select list on all mobile devices.

We add an input type Range, and a special checkbox with data-role flipswitch:

Then we add checkboxes and radio buttons as follows:

Finally, we add the Submit and Reset buttons:

The Submit here will open a PopUp Dialog, instead of submitting the Form.

You can replace it with this code:

<input type="submit" data-inline="true" value="Submit">

Now we add a Footer this way:

And the Dialog is this:

Let's open the Ripple Emulator to see our Form and to check it:

We customized this App by adding some style in a CSS3 file as follows:

That's it....

Hoping this article was helpful for You...

Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן