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

<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Search</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>Search 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">

			<h2>Search inputs</h2>
			<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. </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;search&quot;&gt;Search Input:&lt;/label&gt;
    &lt;input type=&quot;search&quot; name=&quot;password&quot; id=&quot;search&quot; value=&quot;&quot; /&gt;
&lt;/div&gt;
</code></pre>	
			 
			<p>The search input is displayed like this:</p>
			<div data-role="fieldcontain">
	         <label for="search">Search Input:</label>
	         <input type="search" name="password" id="search" value="" />
			</div>

			<p>Themed variation:</p>
			<div data-role="fieldcontain">
	         <label for="searchA">Search Input:</label>
	         <input type="search" name="searchA" id="searchA" value="" data-theme="a" />
			</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">`
Ya'll can scale your pages now. Fixes #1645. Note: we originally disabled user zooming to work around a bug in iOS that automatically zooms the page beyond the constraints of the viewport on orientation change. We are not working around this bug at all now, but you are free to include any meta tag you'd like, or better yet, consider this polyfill: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ 2011-05-17 21:28:19 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
better page titles 2011-03-31 13:11:26 +00:00			`<title>jQuery Mobile Docs - Search</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>Search 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">`

			`<h2>Search inputs</h2>`
			`<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. </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="search">Search Input:</label>`
			`<input type="search" name="password" id="search" value="" />`
			`</div>`
			`</code></pre>`

			`<p>The search 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="search">Search Input:</label>`
themed demo 2010-11-11 04:55:43 +00:00			`<input type="search" name="password" id="search" value="" />`
new forms docs 2010-10-14 21:41:38 +00:00			`</div>`

themed demo 2010-11-11 04:55:43 +00:00			`<p>Themed variation:</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">`
themed demo 2010-11-11 04:55:43 +00:00			`<label for="searchA">Search Input:</label>`
changed the default namespace to "" and updated the docs/demos as such 2011-03-10 03:36:14 +00:00			`<input type="search" name="searchA" id="searchA" value="" data-theme="a" />`
themed demo 2010-11-11 04:55:43 +00:00			`</div>`
new forms docs 2010-10-14 21:41:38 +00:00



			`</form>`

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

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