mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
51 lines
No EOL
2 KiB
HTML
Executable file
51 lines
No EOL
2 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Forms</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header" data-theme="d">
|
|
<h1>Forms</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<p>jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>
|
|
|
|
<h2>Form structure</h2>
|
|
|
|
<p>All forms should be wrapped in a <code>form</code> tag that has an <code>action</code> and <code>method</code> that will handle the form data processing on the server.</p>
|
|
|
|
<code>
|
|
<form action="form.php" method="post">
|
|
...
|
|
</form>
|
|
</code>
|
|
<h2>Page width optimizations</h2>
|
|
|
|
<p>In jQuery Mobile, all form elements are designs to be a flexible width so they will adjust to fit to the width of the device. One optimization built into the framework is that we present labels and form elements differnetly based on screen width. </p>
|
|
<p>If a page is fairly narrow (~480px), the labels are styled as block-level elements so they will stack on top of the form element to save horizontal space.</p>
|
|
<p>On wider screens, the labels and form elements are styled to be on the same line in a 2-column layout to take advantage of the screen real estate.</p>
|
|
|
|
<h2>Grouping elements</h2>
|
|
|
|
<p>To group the label and form element together for styling, we recommend wrapping a <code>div</code> or <code>fieldset </code>with the <code>data-role="fieldcontain"</code> attribute. The framework will add a thin vertical line below this container to visually separate it from the next field in a form.</p>
|
|
|
|
<pre><code>
|
|
<div data-role="fieldcontain">
|
|
...label/input code goes here...
|
|
</div>
|
|
</pre></code>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |