jQuery Mobile Forms

Couple of interesting thoughts on mobile forms in jQuery Mobile.

First, the concept of creating a mobile form is similar to creating a form for a desktop user. This means you will create a form with the standard action, and using GET/POST as you normally would. This also includes wanting to add labels with the for attribute to the page.

Important Warning about IDs

However, because jQuery Mobile puts everything into a single page, to give AJAX transitions between pages, it is important to remember that ids for form elements be unique not only to that page, but also to all pages.

Using Buttons

Buttons server a lot of purposes in a mobile environment.

You can create a button like element from a link, a button tag, or an input tag with a type attribute of button.

Link button
Button element

Inline Buttons

Additionally you can make a button “inline”, so that it only takes up  a small amount of space by adding the ui-btn-inline class to your element. Additionally, you can add the ui-mini class to minimize the padding around the button.

If you really want to shrink the space required, hide the text by adding the class ui-btn-icon-notext. This will leave the icon, but hide the text for you, so you see an icon only button.

Watch on YouTube

Button Groups

You can also incorporate a button group. This groups the buttons together, so you can more easily display them, without spaces like you would be normal inline buttons.

You will want to add a surrounding div, with a data-role of controlgroup to properly display the buttons, like in the example below:

    Add
    Delete
    More

Or watch on YouTube

Sliders and Switches

jQuery Mobile gives you the ability to incorporate slides and switches into a form, fairly easily.

A switch is useful for a binary value (yes/no, on/off, true/false). You can set it up with a simple selector with two option tags, with the data-role of slider.

Flip switch:

    Off
    On

Or watch on YouTube

Check Boxes & Radio Button Groups

Check boxes are automatically styled for you. You don’t have to do a lot with them by default.

However, you can group check boxes into a collection so it looks more unified.

To do so, you will want to use a fieldset, with a data-role of controlgroup. This is nice in that you can then use a legend to label the group.

    
Checkboxes, vertical controlgroup:
    
    Meat
    
    Potato
    
    Veggie

To make this a horizontal group, instead of a vertical group, you can add data-type=”horizontal” to the fieldset.

Select Boxes

Select statements are created the same way you would create/use them for a desktop environment. This will make the select statement take the whole line of text, essentially a block level element.

Taking up Less Space

However, you can change some of the default values for this. For example: data-mini=”true” will use the smaller padding amounts and data-inline=”true”, will make it only take up the necessary space.

Adding Icons

Additionally, you can use the data-icon attribute to display an icon on the select statement, then position it with the data-iconpos attribute.

Don’t Use Native Select Structure

Using the select tag will use the native method of selecting. This may be the wheel display for the iPhone, or something different depending upon your browser for Android.

Instead, you could use data-native-menu=”false” which creates a pop-up window for the user to pick from. jQuery Mobile gives this to you by default, so you don’t have to do any extra coding.

Hiding Labels

While most of the time in a mobile form, we see a label above a form field, we may not want that if we are too concerned for space.

jQuery Mobile has given us a way to fix this for us. Simply add the class ui-hidden-accessible to the label. This will hide it for us. You may ask then “How will the user know what to enter?” Use the placeholder attribute on the input tag to show inside the text box what you want to display.

Placing Labels Beside Elements

On the other hand, you may want to place a label beside an element. In this case, you can wrap the label and the form element in a div, and give it a class of ui-field-contain. This will place the label to the left of the form element, as long as the device width is approximately 448px or wider.

 

jQuery Mobile Forms was originally found on Access 2 Learn