jQuery Mobile Form
jQuery Mobile will automatically automatically add style to HTML forms, make them look more attractive, more friendly to the touch.
jQuery Mobile Form Structure
jQuery Mobile to use CSS to style HTML form elements to make them more attractive and easier to use.
In jQuery Mobile, you can use the following form controls:
- Text entry box
- Search input box
- single button
- Checkbox
- Select Menu
- Slider
- Flip the toggle switch
When using jQuery Mobile form, you should know:
- <Form> element must have a method and a action attribute
- Each form element must have a unique "id" attribute. id must be unique on all pages throughout the site. This is because jQuery Mobile single-page navigation mechanism is presented so that a plurality of different pages at the same time
- Each form element must have a label. Settings tab for the properties to match the element id
Examples
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>
try it"
To hide the label, use the class ui-hidden-accessible. This is often used when you are the attributes of the element as a placeholder tag:
Examples
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
try it"
Tip: We can use the data-clear-btn = "true " attribute to add a button to clear the contents of the input box (an X icon to the right of the input box):
Examples
<input type = "text" name = "fname" id = "fname" data-clear-btn = "true">
try it"
 | Clear button in the input box <input> element is used, but not in the <textarea> in. Search box data-clear-btn The default value is "true", you can use the data-clear-btn = "false" to remove the icon. |
|---|
jQuery Mobile Forms icon
Form the button code is the standard HTML <input> element (button, reset, submit). They will automatically rendering styles, automatically adapting mobile devices to desktop:
Examples
<Input type = "reset" value = "reset button">
<Input type = "submit" value = "Submit Button">
try it"
If you need to add additional styles in <input> button, you can use the following table data- * attributes:
| Attributes | value | description |
|---|---|---|
| data-corners | true | false | Specifies whether a button has rounded corners |
| data-icon | Icon Reference Manual | Designation button icon |
| data-iconpos | left | right | top | bottom | notext | Specify the location of the icon |
| data-inline | true | false | Specifies whether inline button |
| data-mini | true | false | Specifies whether the mini button |
| data-shadow | true | false | Specifies whether the button to add shadow effects |
Button to add icons:
<Input type = "reset" value = "reset button">
<Input type = "submit" value = "Submit Button">
try it"
Field Container
To make labels and form elements look more suitable for widescreen, please or <fieldset> element surrounding the label / form element is used with "ui-field-contain" class <div>:
Examples
<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>
try it"
| ui-field-contain classes based on the width of the page to add styles for labels and form controls. When the width of the page is greater than 480px, it will automatically place the label and form control on the same line. When the width of the page is less than 480px, the label will be placed on top form elements. |
|---|
Tip: To prevent jQuery Mobile automatically add style clickable elements, use data-role = "none" attribute:
Examples
<input type="text" name="fname" id="fname" data-role="none" >
try it"
| jQuery Mobile in the form submission jQuery Mobile automatically handled by AJAX form submission, and the integration server attempts to respond to the DOM of the application. |
|---|