jQuery Mobile supports standard web form controls and new rich controls on the same form. The framework has a feature called “auto-initialization” that takes every web form control and replaces it with a touch-friendly rich control.
The framework also takes new HTML5 input types to a new level, supporting them even on browsers without official support.
The following elements will be rendered as rich controls:
Text inputs, using
Checkbox and radio buttons using
type="range" new control
Slider switches using
option elements with a new
If we don’t want jQuery Mobile to render a form control as a rich UI
component, we can force it using
data-role="none" on every form element.
Every form element will use one line and will not share a row with another form control. This is the best solution for user experience on mobile forms. We can always force columns, but it’s not recommended for mobile forms.
When using AJAX, all the pages will share the same DOM, including the webform controls. That is why we need to maintain our form element’s unique IDs in our entire site. If we have two forms, don’t use the same ID for similar form controls
A very important element of every form’s control is the label. We should
always include a
pointing to the right control using the
for attribute. Let’s see an example: