mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 15:00:23 +00:00
45 lines
No EOL
1.3 KiB
HTML
Executable file
45 lines
No EOL
1.3 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">
|
|
<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>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 above this container to separate it visually from the next field.</p>
|
|
|
|
<pre><code>
|
|
<div data-role="fieldcontain">
|
|
...label/input code goes here...
|
|
</div>
|
|
</pre></code>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |