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
<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname">
</form>
Try it Yourself »Tip: Use a placeholder to specify a short hint that describes the expected value of an input field:
Example
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name...">
Try it Yourself »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
<label for="fname"
class="ui-hidden-accessible"">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name...">
Try it Yourself »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
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true">
Try it Yourself »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="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Try it Yourself »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:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Try it Yourself »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
<form method="post" action="demoform.asp">
<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>
Try it Yourself »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
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none">
Try it Yourself »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.