Barry's jQuery Mobile Demos: Form Widgets


There are three types of buttons in a jQuery Mobile form:

We have already programmed the first type of button when we looked at AJAX. jQuery Mobile also uses AJAX when the submit button is pressed. The reset button does not initiate any action except for clearing all the elements in the form to the default settings.

However, we can add all of the jQuery Mobile attributes that we encounter when we looked at buttons previously. Our previous buttons were defined as special link in a <a> tag with jQuery Mobile features inserted as values in the class attribute. For form buttons we take a separate approach, there is an individual attribute for each feature:

As an example, the following submit button defintion has corners, is inline and has a heart icon in the default left hand side.

<input type="submit" value="Send" id="sub" data-corners="true" data-inline="true" data-icon="heart"/>

It appears as

You can see many options for these buttons in the button demo page.

Text fields

We have already used a text field in the simple examples at the forms basics page.

In addition to the basic text field, HTML5 has introduced several special types of text fields that have widgets to assist the user in completing them. Three common types:

There are also several others, e.g. datetime, number, month, tel, time, url. Older browsers will not support these types and instead present a normal text field. W3Schools has examples of all of the HTML5 input types.

Another type of text field is defined by type="textarea". In jQuery Mobile this defines a multi-line text field that grows to accommodate each extra line of text as required. There is also another type of text field, a search field can be defined by the type="search" attribute. The following text area is defined by the code"

<label for="example">And would appear:</label>
<textarea name="addinfo" id="example">Type multiple lines here...</textarea>

JQuery Mobile has its own search field that defined differently and is shown in the Lists demo page.


A checkbox by itself allows a true/false selection. jQuery Mobile adds style information for a stand-alone checkbox by does not add anything else. However, when we group checkboxes to allow a multiple selections in a group there are some extra facilities added. We can group checkboxes using the <fieldset> tag and the data-role="controlgroup" attribute. For example, consider the following group of checkboxes:

Choose your ingredients:

Try clicking two or more of these checkboxes. This example is coded as

   <fieldset data-role="controlgroup">
      <legend>Choose your ingredients:</legend>
      <label for="tomato">Tomato</label>
      <input type="checkbox" name="filling" id="tomato" value="tomato">
      <label for="lettuce">Lettuce</label>
      <input type="checkbox" name="filling" id="lettuce" value="lettuce">
      <label for="onion">Onion</label>
      <input type="checkbox" name="filling" id="onion" value="onion">

Notice how we use the <legend> tag to associate a text string with the group.

In the above example checkbox are screen width. We can alter the group to be horizontal by adding the attribute data-type="horizontal" to the <fieldset> tag. For example, if we recode the above example header to

<fieldset data-role="controlgroup" data-type="horizontal">

The group of checkboxes would appear as:

Choose your ingredients:

Your browser here may make the check disappears from the checkbox to save space. If this occurs then the buttons will stay pressed to indicate selection. If you still see checkboxes in your browser try adjusting the browser window width to see if they disappear. Different browsers will use different strategies to reduce the width of the button.

Radio buttons

Radio buttons are defined in almost the same way as groups of checkboxes. All we have to change is the type="checkbox" to type="radio". For example, we can turn the above group of checkboxes into radio buttons with the code:

   <fieldset data-role="controlgroup">
      <legend>Choose your ingredients:</legend>
      <label for="tomato2">Tomato</label>
      <input type="radio" name="filling" id="tomato2" value="tomato">
      <label for="lettuce2">Lettuce</label>
      <input type="radio" name="filling" id="lettuce2" value="lettuce">
      <label for="onion2">Onion</label>
      <input type="radio" name="filling" id="onion2" value="onion">

This would appear as:

Choose your ingredients:

Try clicking/touching the radio buttons to see the radio effect. Notice two things that have changed in the code: the value of the type attribute is now "radio" and we have used a new id attribute to allow this to be defined in the same HTML file as the first example. Of course radio buttons behave differently to a group of checkboxes because a maximum of one radio button will be active at any one time.

The normal (non jQuery) options also apply to check boxes and radio buttons. For example, to make a radio button or checkbox selected on screen load you need to add the checked="checked" attribute to its definition.