Basic Form
Description
Methods for building form-based applications in jQuery Mobile are similar to those used to build forms on the Web.
An action and method attribute should be specified for clarity, but they are not required.
By default, the action will default to the current page's relative path, which can be found with
$.mobile.path.get() and an unspecified method will default to "get".
When forms are submitted, they will transition to their subsequent page with the default "slide" transition.
However, we may configure our form transition behavior with the same data attributes used to manage our links.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
label {<!--from w ww. ja va 2s. co m-->
float: left;
width: 5em;
}
input.ui-input-text {
display: inline !important;
width: 12em !important;
}
form p {
clear: left;
margin: 1px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Submiting Forms</h1>
</div>
<div data-role="content">
<form name="test" id="test" action="form-response.php" method="post"
data-transition="pop">
<p>
<label for="email">Email:</label> <input type="email" name="email"
id="email" value="" placeholder="Email" data-theme="d" />
</p>
<p>
<button type="submit" data-theme="a" name="submit">Submit</button>
</p>
</form>
</div>
</div>
</body>
</html>
Attributes
We can add the following attributes to our form element to manage transitions or to disable Ajax:
- data-transition="pop"
- data-direction="reverse"
- data-ajax="false"
To avoid any collisions, form id's must be unique.