jQuery Mobile form

jQuery Mobile form

jQuery Mobile automatically styles HTML forms to make them look more attractive and touch-friendly.

jQuery Mobile form structure

jQuery Mobile uses CSS to style HTML form elements to make them more attractive and easy to use.

In jQuery Mobile, you can use the following form controls:

• The text input box
• Search the input box
• The option button
• Check box
• Select the menu
• Slider
• Flip the toss switch

When using jQuery Mobile forms, you should know:

• The element must have a method and an action property
• Each form element must have a unique "id" property. i d must be unique on all pages of the entire site. This is because jQuery Mobile's one-page navigation mechanism allows multiple different pages to be rendered at the same time
• Each form element must have a label. Set the label's for property to match the element's id

To hide tags, use class ui-hidden-accessible. This is often used when you label the placeholder property of an element:

Field container

To make labels and form elements look more comfortable with a widescreen, surround the label/form element with a data-role-"fieldcontain" property:

	The fieldcontain property styles labels and form controls based on the width of the page. W hen the width of the page is greater than 480px, it automatically places the label on the same line as the form control. When the width of the page is less than 480px, the label is placed on top of the form element.

Tip: To prevent jQuery Mobile from automatically styled clickable elements, use the data-role"none" property:

	Form submission in jQuery Mobile jQuery Mobile automates form submission through AJAX and will attempt to integrate server responses into the DOM of the application.

Read about it

jQuery Mobile icon