jQuery Mobile automatically style HTML forms to make them look engaging and touch-friendly.
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:
When working with jQuery Mobile forms you should know:
Tip: Use a placeholder to specify a short hint that describes the expected value of an input field:
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:
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:
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". |
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:
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 |
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:
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:
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. |