The best jQuery Mobile Form Tutorial In 2024, In this tutorial you can learn jQuery Mobile Form Structure,Examples,Examples,Examples,jQuery Mobile Forms icon,Examples,Button to add icons:,Field Container,Examples,Examples,
jQuery Mobile will automatically automatically add style to HTML forms, make them look more attractive, more friendly to the touch.
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:
When using jQuery Mobile form, you should know:
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:
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):
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. |
Form the button code is the standard HTML <input> element (button, reset, submit). They will automatically rendering styles, automatically adapting mobile devices to desktop:
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 |
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>:
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:
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. |