WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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 »


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 »

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 »