jQuery Mobile Forms

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Forms

« Previous
Next Chapter »

jQuery Mobile automatically style HTML forms to make them look engaging and touch-friendly.

## jQuery Mobile Form Structure

jQuery Mobile uses CSS to style HTML form elements, making them attractive and easy to use.

In jQuery Mobile you can use the following form controls:

- Text Inputs
- Search Inputs
- Radio Buttons
- Checkboxes
- Select Menus
- Sliders
- Flip Toggle Switches

When working with jQuery Mobile forms you should know:

- The <form> element must have a method and an action attribute
- Each form element must have a unique "id" attribute. The id must be unique across the pages in the site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present at the same time
- Each form element must have a label. Set the for attribute of the label to match the id of the element

## Example

<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>
Try it yourself »

To hide the label, use the class ui-hidden-accessible. This is often used when you want the element's placeholder attribute to serve as the label:

## Example

<form method="post" action="demoform.asp">
<label for="fname" class="ui-hidden-accessible">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
</form>
Try it yourself »

## Field Containers

To make labels and form elements look properly on wider screens, wrap a <div> or <fieldset> element with the data-role="fieldcontain" attribute around the label/form element:

## Example

<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lname">
</div>>
</form>
Try it yourself »

| The fieldcontain attribute styles labels and form controls based upon the width of the page. When the width of the page is greater than 480px, it automatically place the label on the same line as the form control. When less than 480px, the label will be placed above the form element.

Tip: To prevent jQuery Mobile to automatically style tappable elements, use the data-role="none" attribute:

## Example

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
Try it yourself »

| Form submission in jQuery Mobile jQuery Mobile will automatically handle the form submission via AJAX, and will attempt to integrate the server response into the DOM of the application.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE