O'Reilly logo

jQuery Mobile: Up and Running by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 an example:

<label ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required