What is a jQuery mobile form?

Overview

A form is an HTML element that allows users to send data to the server.

What is a mobile form?

Mobile forms are the same thing as forms but they fit in well to a mobile device display (aspect ratio).

What are jQuery mobile forms?

jQuery mobile forms are responsive forms that are styled and made dynamic with jQuery libraries.

The jQuery mobile form has the below controls:

  • Text Inputs
  • Search Inputs
  • Radio Buttons
  • Checkboxes can be styled and manipulated using jQuery.

How to style our <form> with jQuery

A label is required for each form element. Set the label’s for attribute to match the element’s name.

Example

Let’s look at an example:

Demonstration of a jQuery form

Explanation

Lines 5 to 7: We add jQuery’s library to enable the styling.

Line 14: Our form has an attribute data-role with the value of controlgroup. It helps jQuery to locate the form where the element is styled.

Note: All the check boxes have a label element and the for attribute value is the same as the name of the input.

This allows jQuery to uniquely identify each field.

Free Resources