jQuery Mobile Forms
jQuery Mobile automatically style HTML forms to make them look engaging and touch-friendly.
jQuery Mobile Form Structure
jQuery Mobile uses CSS to style HTML form elements, making them attractive and easy to use.
In jQuery Mobile you can use the following form controls:
- Text Inputs
- Search Inputs
- Radio Buttons
- Checkboxes
- Select Menus
- Sliders
- Flip Toggle Switches
When working with jQuery Mobile forms you should know:
- The <form> element must have a method and an action attribute
- Each form element must have a unique "id" attribute. The id must be unique across the pages in the site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present at the same time
- Each form element must have a label. Set the for attribute of the label to match the id of the element
Example
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>
Tip: Use a placeholder to specify a short hint that describes the expected value of an input field:
Example
<input type="text" name="fname" id="fname" placeholder="First name...">
Tip: To hide the label, use the "ui-hidden-accessible" class. This is often used when you want the element's placeholder attribute to serve as the label:
Example
<input type="text" name="fname" id="fname" placeholder="First name...">
Tip: If you want a "clear button" (an X icon on the right side of the input field that clears the contents of the field), add the data-clear-btn="true" attribute:
Example
<input type="text" name="fname" id="fname" data-clear-btn="true">
The "clear button" can be added on any <input> element, except for <textarea>. Search fields have this attribute set to "true" as default - to change it, simply specify data-clear-btn="false".
jQuery Mobile Form Buttons
Buttons in forms are coded with standard HTML <input> elements (button, reset, submit). They are automatically styled, making them attractive and easy-to-use on both mobile devices and desktop computers:
Example
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
To additionally style an <input> button, use any of the data-* attributes listed in the table below:
Bold value indicates default value.
Attribute | Value | Description |
---|---|---|
data-corners | true | false | Specifies whether the button should have rounded corners or not |
data-icon | Icons Reference | Specifies the icon of the button |
data-iconpos | left | right | top | bottom | notext | Specifies the position of the icon |
data-inline | true | false | Specifies whether the button should be inline or not |
data-mini | true | false | Specifies whether the button should be small or not |
data-shadow | true | false | Specifies whether the button should have shadows or not |
Include or exclude the attribute(s) you want/don't want:
Field Containers
To make labels and form elements look properly on wider screens, wrap a <div> or <fieldset> element with the "ui-field-contain" class around the label/form element:
Example
<div class="ui-field-contain">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
The "ui-field-contain" class style labels and form controls based upon the width of the page. When the width of the page is greater than 480px, it automatically place the label on the same line as the form control. When less than 480px, the label will be placed above the form element.
Tip: To prevent jQuery Mobile to automatically style tappable/clickable elements, use the data-role="none" attribute:
Example
<input type="text" name="fname" id="fname" data-role="none">
Form submission in jQuery Mobile
jQuery Mobile will automatically handle the form submission via AJAX, and will
attempt to integrate the server response into the DOM of the application.