Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-20 16:00:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
jquery-mobile/docs/forms/textinputs/index.html

222 lines
11 KiB
HTML
Raw Permalink Normal View History

changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Text inputs</title>
2700: Step 5 Update all doc references
2011-10-17 20:51:45 +00:00
<link rel="stylesheet" href="../../../css/themes/default/" />
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../js/jquery.js"></script>
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../../_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Text 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">
<div class="content-primary">
<form action="#" method="get">
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<h2>Text inputs & Textareas</h2>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
Added links to the data- attribute reference to key pages, removed old API pages
2011-11-14 02:13:53 +00:00
<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 device. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to text inputs.</p>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<h2>Text inputs</h2>
Added new HTML5 date and time input support. Fixes #2144 Types added: input type time, date, month, week, date time, datetime-local to auto for enhancements.
2011-10-15 13:33:06 +00:00
<p>To collect standard alphanumeric text, use an <code>input</code> with a <code>type="text"</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. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<pre><code>
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
&lt;label for=&quot;basic&quot;&gt;Text Input:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;basic&quot; value=&quot;&quot; /&gt;
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
</code></pre>
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<p>This will produce a basic text input. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
<p>Optionally wrap the text input in a container with the <code> data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
<pre><code>
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong> &lt;label for=&quot;name&quot;&gt;Text Input:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; value=&quot;&quot; /&gt;
<strong>&lt;/div&gt;
</strong></code></pre>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<p>The text input is now displayed like this:</p>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<h3>More text input types</h3>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<p>In jQuery Mobile, you can use existing and new HTML5 input types such as <code>password</code>, <code>email</code>, <code>tel</code>, <code>number</code>, and more. Some type values are rendered differently across browsers &#8212; for example, Chrome displays the <code>range</code> input renders as a slider &#8212; so we standardize their appearance by dynamically changing their type to <code>text</code> (currently, this applies to <code>range</code> and <code>search</code>). You can configure which input types are degraded to <code>text</code> with the <code>page</code> plugin's options.</p>
Typo correction for "followin" to "following"
2011-11-28 07:32:34 +00:00
<p>One major advantage of using these more specific input types if that on mobile devices, specialized keyboards that speed data entry are offered in place of the standard text keyboard. Try the following inputs on a mobile device to see which display custom keyboards on various platforms.</p>
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" />
</div>
<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>
removed plugin events and methods page from nav (keeping it in the directory to redirect)
2011-09-29 15:33:32 +00:00
Added new HTML5 date and time input support. Fixes #2144 Types added: input type time, date, month, week, date time, datetime-local to auto for enhancements.
2011-10-15 13:33:06 +00:00
<div data-role="fieldcontain">
<label for="time">Time:</label>
<input type="time" name="time" id="time" value="" />
</div>
<div data-role="fieldcontain">
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="" />
</div>
<div data-role="fieldcontain">
<label for="month">Month:</label>
<input type="month" name="month" id="month" value="" />
</div>
<div data-role="fieldcontain">
<label for="week">Week:</label>
<input type="week" name="week" id="week" value="" />
</div>
<div data-role="fieldcontain">
<label for="datetime">Datetime:</label>
<input type="datetime" name="datetime" id="datetime" value="" />
</div>
<div data-role="fieldcontain">
<label for="datetime-l">Datetime local:</label>
<input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
</div>
Added styling support for input type=color Just for good measure. All HTML5 inputs are now auto enhanced into the styled versions. We may need to decide if any of these need to be degraded if the controls are wonky in some browsers.
2011-10-15 13:43:16 +00:00
<div data-role="fieldcontain">
<label for="color">Color:</label>
<input type="color" name="color" id="color" value="" />
</div>
Added new HTML5 date and time input support. Fixes #2144 Types added: input type time, date, month, week, date time, datetime-local to auto for enhancements.
2011-10-15 13:33:06 +00:00
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<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. </p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>textarea</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>
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<strong>&lt;label for=&quot;textarea-a&quot;&gt;Textarea:&lt;/label&gt;
&lt;textarea name=&quot;textarea&quot; id=&quot;textarea-a&quot;&gt;</strong>
I&#x27;m a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
<strong>&lt;/textarea&gt;</strong>
</code></pre>
<p>This will produce a basic textarea with the width set to 100% of the parent container and the label stacked on a separate line.The textarea will grow to fit new lines as you type:</p>
<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
</textarea>
<pre><code>
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong>&lt;label for=&quot;textarea&quot;&gt;Textarea:&lt;/label&gt;
&lt;textarea name=&quot;textarea&quot; id=&quot;textarea&quot;&gt;&lt;/textarea&gt;
<strong>&lt;/div&gt;</strong>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
</code></pre>
<p>The textarea is displayed like this and will grow to fit new lines as you type:</p>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<textarea name="textarea" id="textarea"></textarea>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
</div>
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
updated options
2011-09-28 18:52:06 +00:00
<h2>Calling the textinput plugin</h2>
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<p>This plugin will auto initialize on any page that contains a textarea or any of the text input types listed above, no need for a <code>data-role</code> attribute in the markup. However, if needed you can directly call the <code>textinput</code> plugin on any selector, just like any jQuery plugin:</p>
<pre><code>
updated options
2011-09-28 18:52:06 +00:00
$('input').textinput();
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
</code></pre>
updated options
2011-09-28 18:52:06 +00:00
Re-vamped form docs to add in full width examples and clean up demos
2011-10-14 19:59:55 +00:00
<h2>Degraded input types</h2>
<p>jQuery Mobile degrades several HTML5 input types back to type=text, or type=number after adding enhanced controls. For example, inputs with a type of range are enhanced with a custom slider control, and their type is set to number to offer a usable form input alongside that slider. Inputs with a type of search are degraded back to type=text after we add our own themable search input styling.</p>
<p>The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).</p>
<p>You can configure which types are changed via the page plugin's <code>degradeInputs</code> option, which can be manipulated externally via <code>$.mobile.page.prototype.options.degradeInputs</code>, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
</form>
</div><!--/content-primary -->
<div class="content-secondary">
adjusted the presentation of the left nav and footer for the docs
2011-09-29 20:35:31 +00:00
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
<li data-theme="a"><a href="index.html">Text inputs</a></li>
updated forms nav links
2011-09-29 14:52:58 +00:00
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
<li><a href="../switch/">Flip toggle switch</a></li>
<li><a href="../radiobuttons/">Radio buttons</a></li>
<li><a href="../checkboxes/">Checkboxes</a></li>
<li><a href="../selects/">Select menus</a></li>
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
<li><a href="../forms-themes.html">Theming forms</a></li>
<li><a href="../forms-all-native.html">Native form elements</a></li>
<li><a href="../forms-sample.html">Submitting forms</a></li>
removed plugin events and methods page from nav (keeping it in the directory to redirect)
2011-09-29 15:33:32 +00:00
changed the folder name to something more descriptive (textinputs rather than texts), and corrected the documentation language (several factual errors)
2011-09-27 19:59:39 +00:00
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>
Reference in a new issue Copy permalink