jquery-mobile/docs/forms/docs-forms.html

<!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>
&lt;form action=&quot;form.php&quot; method=&quot;post&quot;&gt;
...
&lt;/form&gt;
</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>				
&lt;div data-role=&quot;fieldcontain&quot;&gt;
	...label/input code goes here...
&lt;/div&gt;
</pre></code>
			
			
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
new form docs folder 2010-10-12 22:15:52 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<title>jQuery Mobile Docs - Forms</title>`
Created a themes directory and moved all CSS and images there. Edited the PHP combiner and .htaccess logic to accommodate this change, as well as allowing manifest files to use a "../" when referencing files, which will be handy when adding themes that don't include structural files yet. Modified all HTML files to point to /themes/default for their theme. 2010-10-13 16:45:10 +00:00			`<link rel="stylesheet" href="../../themes/default" />`
new form docs folder 2010-10-12 22:15:52 +00:00			`<script type="text/javascript" src="../../js/all"></script>`
			`<script type="text/javascript" src="../docs/docs.js"></script>`
			`</head>`
			`<body>`

			`<div data-role="page">`

Trying a few color combos for headers to see if we want to set headers colors of different levels to liven it it. thoughts? - form landing page = b (blue) header - form basics = d (mid gray) - form gallery = e (yellow) - text inputs = c (light gray) 2010-10-15 00:43:16 +00:00			`<div data-role="header" data-theme="d">`
new form docs folder 2010-10-12 22:15:52 +00:00			`<h1>Forms</h1>`
			`</div><!-- /header -->`

			`<div data-role="content">`

new form docs 2010-10-13 17:44:56 +00:00			`<p>jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>`

all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<h2>Form structure</h2>`
new form docs 2010-10-13 17:44:56 +00:00
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<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>`
new form docs 2010-10-13 17:44:56 +00:00
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<pre><code>`
			`<div data-role="fieldcontain">`
			`...label/input code goes here...`
			`</div>`
			`</pre></code>`
new form docs folder 2010-10-12 22:15:52 +00:00

			`</div><!-- /content -->`
			`</div><!-- /page -->`

			`</body>`
			`</html>`