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

<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8" /> 
	<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>Search inputs</h1>
	</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>


	</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>`
			`<meta charset="utf-8" />`
new forms docs 2010-10-14 21:41:38 +00:00			`<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>Search inputs</h1>`
			`</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>`
			`<div data-role="fieldcontain">`
			`<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>`
			`<div data-role="fieldcontain">`
			`<label for="search">Search Input:</label>`
			`<input type="search" name="password" id="search" value="" />`
			`</div>`





			`</form>`

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

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