mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 14:30:28 +00:00
161f5e6ae3
This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile.
56 lines
No EOL
1.9 KiB
HTML
Executable file
56 lines
No EOL
1.9 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>jQuery Mobile Docs - Forms</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script type="text/javascript" src="../../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../../js/"></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>
|
|
|
|
<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> |