jQuery Mobile: Up and Running

Form Elements

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:

• Buttons, using button and input elements

• Text inputs, using input and textarea elements

• Checkbox and radio buttons using input elements

• Menus using select and option elements

• Sliders using input type="range" new control

• Slider switches using select and option elements with a new role

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.

Warning

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

Labels

A very important element of every form’s control is the label. We should always include a label element pointing to the right control using the for attribute. Let’s see ...