Latest web development tutorials
 

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

<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.