jQuery Mobile Forms
jQuery Mobile automatically styles HTML forms, making them more attractive and touch-friendly.
jQuery Mobile Form Structure
jQuery Mobile uses CSS to style HTML form elements, making them more attractive and easier to use.
In jQuery Mobile, you can use the following form controls:
- Text input
- Search input
- Radio buttons
- Checkboxes
- Select menu
- Slider
- Flip toggle switch
When using 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 all pages on the entire site. This is because jQuery Mobile's single-page navigation mechanism causes multiple different pages to be rendered at the same time.
- Each form element must have a label. Set the label'sforattribute to match the element's id
Example
<label for="fname">Name:</label>
<input type="text" name="fname" id="fname">
</form>
Try it Yourself »
To hide the label, use the class ui-hidden-accessible. This is often used when you use the element's placeholder attribute as the label:
Example
<label for="fname" class="ui-hidden-accessible">Name:</label>
<input type="text" name="fname" id="fname" placeholder="Name...">
</form>
Try it Yourself »
Tip:We can use the data-clear-btn="true" attribute to add a button to clear the input field (an X icon on the right side of the input):
Example
<input type="text" name="fname" id="fname" data-clear-btn="true">
Try it Yourself »
 |
The clear input button can be used in <input> elements, but not in <textarea>. For search fields, data-clear-btn defaults to "true", and you can use data-clear-btn="false" to remove the icon. |
|---|
jQuery Mobile Form Icons
The button code in forms is standard HTML <input> elements (button, reset, submit). They are automatically styled and adapt to mobile and desktop devices:
Example
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
Try it Yourself »
If you need to add additional styling to <input> buttons, you can use the data-* attributes in the following table:
| Attribute | Value | Description |
|---|---|---|
| data-corners | true | false | Specifies whether the button has rounded corners |
| data-icon | Icon Reference Manual | Specifies the button icon |
| data-iconpos | left | right | top | bottom | notext | Specifies the icon position |
| data-inline | true | false | Specifies whether it is an inline button |
| data-mini | true | false | Specifies whether it is a mini button |
| data-shadow | true | false | Specifies whether the button has a shadow effect |
Add Icons to Buttons:
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
Try it Yourself »
Field Containers
To make labels and form elements look more adapted to wide screens, wrap the label/form elements in a <div> or <fieldset> element with the "ui-field-contain" class:
Example
<div class="ui-field-contain">
<label for="fname">Surname:</label>
<input type="text" name="fname" id="fname">
<label for="lname">Surname:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Try it Yourself »
|
The ui-field-contain class styles labels and form controls based on the page width. When the page width is greater than 480px, it automatically places labels on the same line as the form controls. When the page width is less than 480px, labels are placed above the form elements. |
|---|
Tip:To prevent jQuery Mobile from automatically styling clickable elements, use the data-role="none" attribute:
Example
<input type="text" name="fname" id="fname" data-role="none">
Try it Yourself »
|
Form Submission in jQuery Mobile jQuery Mobile automatically handles form submission via AJAX and attempts to integrate the server response into the application's DOM. |
|---|