mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
48 lines
No EOL
1.5 KiB
HTML
Executable file
48 lines
No EOL
1.5 KiB
HTML
Executable file
<!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">
|
|
<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> |