Here we describe Step by step How to create a jQueryMobile Form For Android and BlackBerryIn 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:
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.
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: