forked from jquery-archive/jquery-mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
forms-sample.html
executable file
·44 lines (36 loc) · 2.07 KB
/
forms-sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Docs - Forms</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header">
<h1>Forms</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Form submission</h2>
<p>In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify <code>action</code> and <code>method</code> properties on your form element.</p>
<p>This page demonstrates automated ajax handling of form submissions. The form below is configured to send regular a <code>get</code> request to <code>forms-sample-response.php</code>. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows <code>get</code> result pages to be bookmarked by updating the Url hash when the response returns successfully. Also like ordinary form submissions, <code>post</code> requests do not contain query parameters in the hash, so they are not bookmarkable.</p>
<form action="forms-sample-response.php" method="get">
<fieldset>
<div data-role="fieldcontain">
<label for="shipping" class="select">Choose shipping method:</label>
<select name="shipping" id="shipping">
<option value="Standard shipping">Standard: 7 day</option>
<option value="Rush shipping">Rush: 3 days</option>
<option value="Express shipping">Express: next day</option>
<option value="Overnight shipping">Overnight</option>
</select>
</div>
<button type="submit" data-theme="a" name="submit" value="submit-value">Submit</button>
</fieldset>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>