jQuery Mobile forms, like standard HTML forms, are wrapped in a form tag, with action and method attributes: <form action="page.php" method="post">. Because jQuery Mobile uses a single-page navigation model, be sure that each form element has a unique id - different from any other element in the site.
Each form control element should be paired with a meaningful label, connected by the label's for attribute and the form control's id:
<label for="fname">First Name:</label> <input type="text" name="firstname" id="fname">
If using the HTML5 placeholder attribute - to display an instruction in the form element itself - you may want to hide the label. Rather than delete the label (and make your pages harder to use for visitors employing a screen reader or other assistive technology), apply the jQuery Mobile convenience class ui-hidden-accessible:
<label for="fname" class="ui-hidden-accessible">First Name:</label> <input type="text" name="fname" id="fname" placeholder="First Name">
The screenshot below shows the result of viewing WidgetsUI/Demos/forms/index.html in a mobile device:
Each field - each form control or set of related form controls - is wrapped by a
div with attribute
data-role="fieldcontain". This framework aligns the input and associated label next to each other, and breaks to stacked block-level elements below about 480px. The fieldcontainer will also add a thin bottom border to act as a visual field separator.
The first two fields ("Text Input" and "Text Input (mini)") show the difference between regular and mini, with the latter being slightly smaller.
The "Textarea" field is coded and displays much like a traditional desktop textarea. The "Search Input" field is an HTML5 search-type
input; note how jQuery Mobile styles the display with a search icon.
The "Flip switch" element, a common UI element on mobile devices, is used for on/off or true/false fields. One can either drag the handle or tap one side of the switch. It is coded as a
select with attribute
data-role="slider". Note that we hide the label for this element with class
The next form control, a
select with label "Select menu", is a standard drop-down menu.
The "Slider" element is a slider, an
input of type
range - a useful control for allowing users to pick from a range of values. Add a
step attribute to the form element to quantize the values to a given step increment.
The next two sets of form elements illustrate the difference between vertical and horizontal checkboxes: vertically displayed checkboxes show a checkbox, whereas in horizontally displayed checkboxes the element acts more like a button, with a color showing the on (checked) state. In both cases, we use a
fieldset with attribute
data-role="controlgroup" to group the checkboxes; we use the attribute
data-type="horizontal" for the horizontal display.
Radio buttons allow for one, and only one, element to be selected, as with traditional desktop radio buttons. A
fieldset, with attribute
data-role="controlgroup", groups the radio buttons.
A "Submit" button completes the form.