mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +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.
111 lines
No EOL
4.6 KiB
HTML
Executable file
111 lines
No EOL
4.6 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" data-theme="c">
|
|
<h1>Text inputs</h1>
|
|
</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>
|
|
<div data-role="fieldcontain">
|
|
<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>
|
|
<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>
|
|
<div data-role="fieldcontain">
|
|
<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>
|
|
<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>
|
|
<div data-role="fieldcontain">
|
|
<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>
|
|
<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> |