jQuery Mobile form basics

jQuery Mobile automatically styles HTML forms to make them look 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 box

• Search input box

• Radio button

• Check box

• Select menu

• Slider

• Flip the toggle switch

When using jQuery Mobile forms, you should know:

• <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 allows multiple different pages to be rendered at the same time

• Each form element must have a label. Set the tag's for attribute to match the element's id

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

We can use data-clear-btn="true" attribute to add a button to clear the contents of the input box (an X icon on the right side of the input box):

<form method="post" action="demoform.html">

 <label for="fname" class="ui-hidden-accessible">姓名:</label>
 <input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

Click the "Run Instance" button to view the online instance

##The button to clear the input box can be used in the <input> element, but not in the <textarea>. The default value of data-clear-btn in the search box is "true". You can use data-clear-btn="false" to remove the icon.

---

jQuery Mobile Form Icon

The button code in the form is the standard HTML <input> element (button, reset, submit). They will automatically render styles and can automatically adapt to mobile devices and desktop devices:

Example

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

If you need to add additional styles to the <input> button, you can use the data-* attributes in the following table:

##AttributesvalueDescriptiondata-cornersSpecifies whether the button has a circle Angulardata-iconIcon Reference ManualSpecify Button Icondata-iconposSpecify the icon positiondata-inline true | Specify whether to inline the buttondata-minitrue | Specify whether it is a mini buttondata-shadowSpecify whether the button Add shadow effect

	true | false
	left | right | top | bottom | notext
	false
	false
	true | false

Button Add icon:

Example

<input type="button" value="按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">

---

Field Container

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

Example

<input type="button" value="按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">

The ui-field-contain class adds styles to labels and form controls based on the width of the page. When the page width is greater than 480px, it will automatically place the label on the same line as the form control. When the page width is less than 480px, the label will be placed above the form element.

Tip: To prevent jQuery Mobile from automatically adding styles to clickable elements, use the data-role="none" attribute:

Example

<form method="post" action="demoform.php">
  <div class="ui-field-contain">
    <label for="fname">姓:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">姓:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

##Form submission in jQuery Mobile

	jQuery Mobile automatically handles form submission via AJAX and will attempt to integrate the server response into the application's DOM.