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>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>				
&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>`
updated themes 2010-10-15 14:43:56 +00:00			`<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>`

all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<h2>Grouping elements</h2>`

updated themes 2010-10-15 14:43:56 +00:00			`<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>`
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>`