jQuery Mobile Forms

jQuery Mobile automatically styles HTML forms to make 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 menus
• Sliders
• Flip toggle switches

When using jQuery Mobile forms, you should be aware of the following:

• 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 of the site. This is because jQuery Mobile's single-page navigation mechanism renders multiple different pages at the same time.
• Each form element must have a label. Set the label's for attribute to match the element's id.

Example

<form method="post" action="demoform.html">
  <label for="fname">Name:</label>
  <input type="text" id="fname" name="fname">
</form>

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" id="fname" name="fname" placeholder="Name">

Tip: You can add a clear button for the input field (an X icon on the right side of the input field) using the data-clear-btn="true" attribute:

Example

<label for="fname">Name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">

| | The clear button can be used in <input> elements but not in <textarea>. The data-clear-btn attribute for search fields defaults to "true", and you can use data-clear-btn="false" to remove the icon. | | --- | --- |

jQuery Mobile Form Icons

The button codes in forms are standard HTML <input> elements (button, reset, submit). They are automatically styled and adapt to both mobile and desktop devices:

Example

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">

If you need to add extra styling to <input> buttons, you can use the data-* attributes from the table below:

Adding Icons to Buttons:

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">

Field Containers

To make labels and form elements look more adaptive to wide screens, surround the label/form elements with a <div> or <fieldset> element with the class "ui-field-contain":

Example

<div class="ui-field-contain">
  <label for="fname">Name:</label>
  <input type="text" id="fname" name="fname">
</div>

| | 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 the labels inline with the form controls. When the page width is less than 480px, the 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" data-role="none">

| | Form Submission in jQuery Mobile <br><br>jQuery Mobile automatically handles form submissions via AJAX and attempts to integrate server responses into the application's DOM. | | --- | --- |