Wednesday, June 3, 2015

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   2


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:
How to create a jQuery Mobile Form   3



Add a data-role="page" for setting our web Page, and a data-role="header" fixed, with a NavBar :
How to create a jQuery Mobile Form    4



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

How to create a jQuery Mobile Form  5

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:


How to create a jQuery Mobile

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:


How to create a jQuery Form

Then we add checkboxes and radio buttons as follows:


How to create a  Form

Finally, we add the Submit and Reset buttons:


to create a jQuery Mobile Form

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:

How to create a jQuery Mobile Form    18



And the Dialog is this:
How to create a jQuery Mobile Form    17



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

create a jQuery Mobile Form




a jQuery Mobile Form




jQuery Mobile Form




 to create a jQuery Form




create a Mobile Form








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


How to create a jQuery Mobile Form    7


That's it....
Hoping this article was helpful for You...
Happy programming.....

      by Carmel Schvartzman


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