jQuery Mobile form

jQuery Mobile automatically adds an excellent touch-friendly appearance to HTML forms.

jQuery Mobile form structure

jQuery Mobile uses CSS to set the styles of HTML form elements to make them more attractive and easier to use.

In jQuery Mobile, you can use the following form controls:

  • Text box
  • Search box
  • Radio button
  • Checkbox
  • Selection menu
  • Slider
  • Flip switch

When dealing with jQuery Mobile forms, you should be aware of the following information:

  • The <form> element must be set with the method and action attributes
  • Each form element must be set with a unique "id" attribute. This id must be unique within the pages of the site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be presented at the same time.
  • Each form element must have a label. Please set the for attribute of the label to match the element's id.

Example

<form method="post" action="demoform.asp">
  <label for="fname">First 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 very common when you need the placeholder attribute of an element to act as a label:

Example

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Name：</label>
  <input type="text" name="fname" id="fname" placeholder="Name...">
</form>

Try It Yourself

Field Container

If you need the label and form elements to display normally on wide screens, wrap the label or form element with a <div> or <fieldset> element that has the data-role="fieldcontain" attribute:

Example

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <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

Tip:The fieldcontain attribute sets the styles for label and form controls based on the page width. When the page width is greater than 480px, it automatically places the label and form control on the same line. When it is less than 480px, the label is placed above the form element.

Tip:To prevent jQuery Mobile from automatically setting styles for 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

Submit Form in jQuery Mobile

Tip:jQuery Mobile will automatically submit the form via AJAX and will try to integrate the server response into the application's DOM.