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

<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
	<title>jQuery Mobile Docs - Text inputs</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../js/"></script>
	<script src="../docs/docs.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header" data-theme="b">
		<h1>Text inputs</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		
		<form action="#" method="get">


			<p>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile.</p>
			
						<h2>Text inputs</h2>
			<p>To collect standard alphanmeric text, use an <code>input</code> with a <code>type="text"</code> attribute. It's important to  set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>

<pre><code>	
&lt;div data-role=&quot;fieldcontain&quot;&gt;
    &lt;label for=&quot;name&quot;&gt;Text Input:&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; value=&quot;&quot;  /&gt;
&lt;/div&gt;	
</code></pre>		
			 
			<p>The text input is displayed like this:</p>
	    	<div data-role="fieldcontain">
	         <label for="name">Text Input:</label>
	         <input type="text" name="name" id="name" value=""  />
			</div>

			
			<h2>Password inputs</h2>
			<p>For password fields, use an <code>input</code> with a <code>type="password"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>

<pre><code>	
&lt;div data-role=&quot;fieldcontain&quot;&gt;
    &lt;label for=&quot;password&quot;&gt;Password Input:&lt;/label&gt;
    &lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; value=&quot;&quot; /&gt;
&lt;/div&gt;	
</code></pre>	
			 
			<p>The password input is displayed like this:</p>
			<div data-role="fieldcontain">
	         <label for="password">Password Input:</label>
	         <input type="password" name="password" id="password" value="" />
			</div>
			
			
			<h2>More standard HTML5 input types</h2>
			<p>In jQuery Mobile, you can use new HTML5 input types such as <code>email</code>, <code>tel</code>, <code>number</code>, and more. We actively degrade certain types to <code>type=text</code> (currently, <code>range</code> and <code>search</code>) in certain cases when we provide a replacement for that type's native control. You can configure which types are degraded to text through the <code>page</code> plugin's options.</p>
			
			<div data-role="fieldcontain">
	         <label for="number">Number:</label>
	         <input type="number" name="number" id="number" value=""  />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="email">Email:</label>
	         <input type="email" name="email" id="email" value=""  />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="url">Url:</label>
	         <input type="url" name="url" id="url" value=""  />
			</div>
			
			<div data-role="fieldcontain">
	         <label for="tel">Tel:</label>
	         <input type="tel" name="tel" id="tel" value=""  />
			</div>
		

			<h2>Textareas</h2>
			<p>For multi-line text inputs, use a <code>textarea</code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar which is very hard to use on a mobile device. </p>
			<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>

<pre><code>	
&lt;div data-role=&quot;fieldcontain&quot;&gt;
	&lt;label for=&quot;textarea&quot;&gt;Textarea:&lt;/label&gt;
	&lt;textarea cols=&quot;40&quot; rows=&quot;8&quot; name=&quot;textarea&quot; id=&quot;textarea&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
</code></pre>	
			 
			<p>The textarea is displayed like this and will grow as you type:</p>
			<div data-role="fieldcontain">
			<label for="textarea">Textarea:</label>
			<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
			</div>
		
			
	</form>
	
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
new forms docs 2010-10-14 21:41:38 +00:00			`<!DOCTYPE html>`
			`<html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<head>`
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags. 2011-02-18 20:00:18 +00:00			`<meta charset="utf-8">`
			`<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">`
better page titles 2011-03-31 13:11:26 +00:00			`<title>jQuery Mobile Docs - Text inputs</title>`
Sweep through all files to add a trailing slash to <link> tags that include thems/default. This should fix Opera Mobile Issue 763. 2011-01-06 00:19:24 +00:00			`<link rel="stylesheet" href="../../themes/default/" />`
Added link to demo css file to all docs pages 2010-11-11 19:15:42 +00:00			`<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>`
been meaning to do this for a while. 2011-04-14 20:04:47 +00:00			`<script src="../../js/jquery.js"></script>`
			`<script src="../../js/"></script>`
			`<script src="../docs/docs.js"></script>`
new forms docs 2010-10-14 21:41:38 +00:00			`</head>`
			`<body>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="page">`
new forms docs 2010-10-14 21:41:38 +00:00
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="header" data-theme="b">`
new forms docs 2010-10-14 21:41:38 +00:00			`<h1>Text inputs</h1>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>`
new forms docs 2010-10-14 21:41:38 +00:00			`</div><!-- /header -->`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="content">`
new forms docs 2010-10-14 21:41:38 +00:00
			`<form action="#" method="get">`


			`<p>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile.</p>`

all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00			`<h2>Text inputs</h2>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<p>To collect standard alphanmeric text, use an <code>input</code> with a <code>type="text"</code> attribute. It's important to set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>`
new forms docs 2010-10-14 21:41:38 +00:00
			`<pre><code>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
new forms docs 2010-10-14 21:41:38 +00:00			`<label for="name">Text Input:</label>`
			`<input type="text" name="name" id="name" value="" />`
			`</div>`
			`</code></pre>`

			`<p>The text input is displayed like this:</p>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
new forms docs 2010-10-14 21:41:38 +00:00			`<label for="name">Text Input:</label>`
			`<input type="text" name="name" id="name" value="" />`
			`</div>`



			`<h2>Password inputs</h2>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<p>For password fields, use an <code>input</code> with a <code>type="password"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>`
new forms docs 2010-10-14 21:41:38 +00:00
			`<pre><code>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
new forms docs 2010-10-14 21:41:38 +00:00			`<label for="password">Password Input:</label>`
			`<input type="password" name="password" id="password" value="" />`
			`</div>`
			`</code></pre>`

			`<p>The password input is displayed like this:</p>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
new forms docs 2010-10-14 21:41:38 +00:00			`<label for="password">Password Input:</label>`
			`<input type="password" name="password" id="password" value="" />`
			`</div>`
only degrade input types that conflict with our replacement UI control. For now, just search and range. Fixes #415, Fixes #420 2010-11-10 16:22:56 +00:00

			`<h2>More standard HTML5 input types</h2>`
			`<p>In jQuery Mobile, you can use new HTML5 input types such as <code>email</code>, <code>tel</code>, <code>number</code>, and more. We actively degrade certain types to <code>type=text</code> (currently, <code>range</code> and <code>search</code>) in certain cases when we provide a replacement for that type's native control. You can configure which types are degraded to text through the <code>page</code> plugin's options.</p>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
only degrade input types that conflict with our replacement UI control. For now, just search and range. Fixes #415, Fixes #420 2010-11-10 16:22:56 +00:00			`<label for="number">Number:</label>`
			`<input type="number" name="number" id="number" value="" />`
			`</div>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
only degrade input types that conflict with our replacement UI control. For now, just search and range. Fixes #415, Fixes #420 2010-11-10 16:22:56 +00:00			`<label for="email">Email:</label>`
			`<input type="email" name="email" id="email" value="" />`
			`</div>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
only degrade input types that conflict with our replacement UI control. For now, just search and range. Fixes #415, Fixes #420 2010-11-10 16:22:56 +00:00			`<label for="url">Url:</label>`
			`<input type="url" name="url" id="url" value="" />`
			`</div>`

changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
only degrade input types that conflict with our replacement UI control. For now, just search and range. Fixes #415, Fixes #420 2010-11-10 16:22:56 +00:00			`<label for="tel">Tel:</label>`
			`<input type="tel" name="tel" id="tel" value="" />`
			`</div>`
all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00
new forms docs 2010-10-14 21:41:38 +00:00
			`<h2>Textareas</h2>`
			`<p>For multi-line text inputs, use a <code>textarea</code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar which is very hard to use on a mobile device. </p>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>`
new forms docs 2010-10-14 21:41:38 +00:00
			`<pre><code>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
new forms docs 2010-10-14 21:41:38 +00:00			`<label for="textarea">Textarea:</label>`
			`<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>`
			`</div>`
			`</code></pre>`

			`<p>The textarea is displayed like this and will grow as you type:</p>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<div data-role="fieldcontain">`
new forms docs 2010-10-14 21:41:38 +00:00			`<label for="textarea">Textarea:</label>`
			`<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>`
			`</div>`

all new forms section with new demos and cleaned up code 2010-10-15 00:28:22 +00:00
new forms docs 2010-10-14 21:41:38 +00:00
			`</form>`

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

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