There are three types of buttons in a jQuery Mobile form:
<input type="button" ...- a programmable button
<input type="submit" ...- a button to submit all of the data currently in the form
<input type="reset" ...- a button to return to default values all the elements in the 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
For form buttons we take a separate approach, there is an individual attribute for each feature:
data-icon- assign one of the jQuery Mobile icons using given value
data-iconpos- icon position (left, right, top, bottom, notext)
data-corners- corners on the button (true/false)
data-inline- button in the text or full width (true/false)
data-mini- small version of button (true/false)
data-shadow- shadows on the button (true/false)
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.
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:
<input type="text" ...- normal unformatted text
<input type="date" ...formats date and many browsers present a calendar for selection
<input type="e-mail" ...- insists on an e-mail address with '@' character
<input type="color" ...- presents a color chooser
There are also several others, e.g.
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
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
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
For example, consider the following group of checkboxes:
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"> </fieldset>
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
For example, if we recode the above example header to
<fieldset data-role="controlgroup" data-type="horizontal">
The group of checkboxes would appear as:
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 are defined in almost the same way as groups of checkboxes.
All we have to change is the
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"> </fieldset>
This would appear as:
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
attribute to its definition.