Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-03 12:24:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

all new forms section with new demos and cleaned up code

Browse source
This commit is contained in:
Todd Parker 2010-10-14 20:28:22 -04:00
parent f45a7e88d4
commit 7f5d317ff9
9 changed files with 744 additions and 313 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
docs/forms/buttons-themes.html
View file

@ -1,29 +0,0 @@
<!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>Theming forms</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Theming</h2>
<p>To do...</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

26
docs/forms/docs-forms.html
View file

@ -18,18 +18,24 @@
<p>jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>
<h2>Form setup</h2>
<p>A form alwaysbegins with a standard <code>form</code> tag</p>
<h2>Form structure</h2>
<p><strong>The collapsible panels</strong> are marked up as either heading/content, or legend/fieldset combinations. Helper text on the toggle links allows them to make sense on a screen reader.</p>
<p>All forms should be wrapped in a <code>form</code> tag that has an <code>action</code> and <code>method</code> that will handle the form data processing on the server.</p>
<code>
&lt;form action=&quot;form.php&quot; method=&quot;post&quot;&gt;
...
&lt;/form&gt;
</code>
<h2>Grouping elements</h2>
<p>To group the label and form element together for styling, we recommend wrapping a <code>div</code> or <code>fieldset </code>with the <code>data-role="fieldcontain"</code> attribute. The framework will add a thin vertical line above this container to separate it visually from the next field.</p>
<p><strong>Text inputs and textareas</strong> are largely left alone, aside from having some theme classes applied. Textareas auto-grow using Brandon Aaron's expandable plugin, eliminating the need to 2-finger scroll a textarea on a mobile device.</p>
<p><strong>The radio and checkbox controls</strong> below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. The horizontal toggles for "cache settings" and "font styling" are also just sets of checkboxes and radios with icons disabled.</p>
<p><strong>The select menus</strong> are driven off native select elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended after that div. This lets us take advantage of native scrolling while the menu is in use. Try the third select menu to see this behavior in action. </p>
<p><strong>The submit buttons</strong> are marked up as both input[type=submit] and button elements in the source, but we're generating anchor-based buttons in their place in order to take advantage of consistent styling across mobile browsers. The original buttons are still on the page, hidden from view, and clicking the replacement button will trigger a click on the original element, so the form can be submitted normally.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
...label/input code goes here...
&lt;/div&gt;
</pre></code>
</div><!-- /content -->

239
docs/forms/forms-all.html
View file

@ -17,101 +17,63 @@
<div data-role="content">
<form action="#" method="get">
<h2>Form elements</h2>
<p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. In browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.</p>
<fieldset data-role="collapsible" data-state="collapsed">
<legend>Text input controls</legend>
<div data-role="fieldcontain">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="password">Password Input:</label>
<input type="password" name="password" id="password" value="" data-theme="b" />
<label for="name">Password:</label>
<input type="password" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" data-theme="b" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" />
</div>
<div data-role="fieldcontain">
<label for="slider2">Select slider:</label>
<label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
</fieldset>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<div id="radio-examples" data-role="collapsible" data-state="collapsed">
<h2>Radio toggles</h2>
<fieldset data-role="controlgroup" data-role="fieldcontain">
<legend>Choose one:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Choice 3</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Choice 4</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Same with theme change:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">On</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Off</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
<label for="radio-choice-e">Other</label>
</fieldset>
</div>
<div id="checkbox-examples" data-role="collapsible" data-state="collapsed">
<h2>Checkboxes</h2>
<fieldset data-role="controlgroup">
<legend>Choose one or more:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">Choice 1</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">Choice 2</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" checked="checked" />
<label for="checkbox-3">Choice 3</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6">b</label>
@ -122,59 +84,110 @@
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
<label for="checkbox-8">u</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>Single checkbox:</legend>
<input type="checkbox" name="checkbox-9" id="checkbox-9" class="custom" />
<label for="checkbox-9">Single Checkbox</label>
</fieldset>
</div>
<fieldset data-role="collapsible" data-state="collapsed">
<legend>Select menus</legend>
</div>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Few options:</label>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hampster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Layout view:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">List</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Grid</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
<label for="radio-choice-e">Gallery</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Many options:</label>
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
<option value="Choice 5">Choice 5</option>
<option value="Choice 6">Choice 6</option>
<option value="Choice 7">Choice 7</option>
<option value="Choice 8">Choice 8</option>
<option value="Choice 9">Choice 9</option>
<option value="Choice 10">Choice 10</option>
<option value="Choice 11">Choice 11</option>
<option value="Choice 12">Choice 12</option>
<option value="Choice 13">Choice 13</option>
<option value="Choice 14">Choice 14</option>
<option value="Choice 15">Choice 15</option>
<option value="Choice 16">Choice 16</option>
<option value="Choice 17">Choice 19</option>
<option value="Choice 20">Choice 20</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</fieldset>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</div>
</form>
</div><!-- /content -->

78
docs/forms/forms-checkboxes.html
View file

@ -19,33 +19,68 @@
<form action="#" method="get">
<h2>Checkboxes</h2>
<p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide visual feedback.</p>
<p>To create a checkbox, To add a slider widget to your page, start with an <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. 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>
<p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. </p>
<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. 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.</p>
<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;label for=&quot;slider2&quot;&gt;Select slider:&lt;/label&gt;
&lt;select name=&quot;slider2&quot; id=&quot;slider2&quot; data-role=&quot;slider&quot;&gt;
&lt;option value=&quot;off&quot;&gt;Off&lt;/option&gt;
&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;
&lt;/select&gt;
&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
&lt;legend&gt;Agree to the terms:&lt;/legend&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot; class=&quot;custom&quot; /&gt;
&lt;label for=&quot;checkbox-1&quot;&gt;I agree&lt;/label&gt;
&lt;/fieldset&gt;
&lt;/div&gt;
</code></pre>
<p>A radiobutton list is displayed like this:</p>
<fieldset data-role="controlgroup">
<legend>Choose one or more:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">Choice 1</label>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
<h2>Vertically grouped checkboxes</h2>
<p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code>data-role="controlgroup"</code> attribute on the fie.</p>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">Choice 2</label>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" checked="checked" />
<label for="checkbox-3">Choice 3</label>
</fieldset>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>
<h2>Horizontal toggle sets</h2>
<p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
<code>
&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong> data-role=&quot;fieldcontain&quot;&gt;
</code>
<p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.</p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6">b</label>
@ -56,12 +91,9 @@
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
<label for="checkbox-8">u</label>
</fieldset>
</div>
<fieldset data-role="controlgroup">
<legend>Single checkbox:</legend>
<input type="checkbox" name="checkbox-9" id="checkbox-9" class="custom" />
<label for="checkbox-9">Single Checkbox</label>
</fieldset>
</form>
</div><!-- /content -->

89
docs/forms/forms-radiobuttons.html
View file

@ -19,48 +19,81 @@
<form action="#" method="get">
<h2>Radio buttons</h2>
<p>Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide visual feedback.</p>
<p>To add a set of radiobuttons to your page, start with an <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. 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>
<p>Radio buttons are used to provide a list of options where only a single items can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. </p>
<h2>Vertically grouped radio buttons</h2>
<p>To create a set of radio buttons, add an <code>input</code> with a <code>type="radio"</code> attribute and a corresponding <code>label</code>. 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.</p>
<p>Because radio buttons use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;label for=&quot;slider2&quot;&gt;Select slider:&lt;/label&gt;
&lt;select name=&quot;slider2&quot; id=&quot;slider2&quot; data-role=&quot;slider&quot;&gt;
&lt;option value=&quot;off&quot;&gt;Off&lt;/option&gt;
&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;
&lt;/select&gt;
&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
&lt;legend&gt;Choose a pet:&lt;/legend&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
&lt;label for=&quot;radio-choice-1&quot;&gt;Cat&lt;/label&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-2&quot; value=&quot;choice-2&quot; /&gt;
&lt;label for=&quot;radio-choice-2&quot;&gt;Dog&lt;/label&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-3&quot; value=&quot;choice-3&quot; /&gt;
&lt;label for=&quot;radio-choice-3&quot;&gt;Hampster&lt;/label&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-4&quot; value=&quot;choice-4&quot; /&gt;
&lt;label for=&quot;radio-choice-4&quot;&gt;Lizard&lt;/label&gt;
&lt;/fieldset&gt;
&lt;/div&gt;
</code></pre>
<p>A radiobutton list is displayed like this:</p>
<fieldset data-role="controlgroup" data-role="fieldcontain">
<legend>Choose one:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Choice 1</label>
<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code>data-role="controlgroup"</code> attribute on the fie.</p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked" />
<label for="radio-pet-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2" />
<label for="radio-pet-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Choice 3</label>
<input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3" />
<label for="radio-pet-3">Hampster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Choice 4</label>
<input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4" />
<label for="radio-pet-4">Lizard</label>
</fieldset>
</div>
<h2>Horizontal radio button sets</h2>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Same with theme change:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">On</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Off</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
<label for="radio-choice-e">Other</label>
<p>Radio buttons can also be used for grouped button sets only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
<code>
&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-type=&quot;horizontal&quot;</strong> data-role=&quot;fieldcontain&quot;&gt;
</code>
<p>The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.</p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Layout view:</legend>
<input type="radio" name="radio-view-b" id="radio-view-c" value="on" checked="checked" />
<label for="radio-view-c">List</label>
<input type="radio" name="radio-view-b" id="radio-view-d" value="off" />
<label for="radio-view-d">Grid</label>
<input type="radio" name="radio-view-b" id="radio-view-e" value="other" />
<label for="radio-view-e">Gallery</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->

123
docs/forms/forms-selects.html Executable file
View file

@ -0,0 +1,123 @@
<!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>Slider</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#" method="get">
<h2>Select menus</h2>
<p>The select menus are driven off native <code>select</code> elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. </p>
<p>When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended as a whole new page. This lets us take advantage of native scrolling while the menu is in use. </p>
<p>To add a select widget to your page, start with a standard <code>select</code> element populated with a set of <code>option</code> elements. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</code> so they are semantically associated. Wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form. </p>
<p>The framework will find all <code>select</code> elements and automatically enhance them into the custom select menus.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;label for=&quot;select-choice-1&quot; class=&quot;select&quot;&gt;Choose shipping method:&lt;/label&gt;
&lt;select name=&quot;select-choice-1&quot; id=&quot;select-choice-1&quot;&gt;
&lt;option value=&quot;standard&quot;&gt;Standard: 7 day&lt;/option&gt;
&lt;option value=&quot;rush&quot;&gt;Rush: 3 days&lt;/option&gt;
&lt;option value=&quot;express&quot;&gt;Express: next day&lt;/option&gt;
&lt;option value=&quot;overnight&quot;&gt;Overnight&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
</code></pre>
<p> If there is a small number of options that will fit on the device's screen, it will appear as a small overlay with a pop transition.</p>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<p>If there is a select menu with too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard list view that contains all the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the <code>label</code> is used as the title for this page.</p>
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

112
docs/forms/forms-text.html
View file

@ -21,25 +21,7 @@
<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>General conventions</h2>
<p>All forms should be wrapped in a <code>form</code> tag that has an <code>action</code> and <code>method</code> that will handle the form data processing on the server.</p>
<code>
&lt;form action=&quot;form.php&quot; method=&quot;post&quot;&gt;
...
&lt;/form&gt;
</code>
<p>To group the label and form element together for styling, we recommend wrapping a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute. The framework will add a thin vertical line above this container to separate it visually from the next field.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
...label/input code goes here...
&lt;/div&gt;
</pre></code>
<h2>Text inputs</h2>
<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>
@ -73,24 +55,7 @@
<input type="password" name="password" id="password" value="" />
</div>
<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>
<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>
@ -109,78 +74,7 @@
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<h2>Sliders</h2>
<p>To add a slider widget to your page, start with an <code>input</code> with a new HTML5 <code>type="range"</code> attribute. Specify the <code>value</code> (current value), <code>min</code> and <code>max</code> attribute values to configure the slider. The framework will parse these attributes to configure the slider. </p>
<p>As you drag the slider, the input will update and vice-versa so they are always in sync so you can submit the slider value with form in a simple way. 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;slider&quot;&gt;Input slider:&lt;/label&gt;
&lt;input type=&quot;range&quot; name=&quot;slider&quot; id=&quot;slider&quot; value=&quot;0&quot; min=&quot;0&quot; max=&quot;100&quot; /&gt;
&lt;/div&gt;
</code></pre>
<p>The slider and input is displayed like this:</p>
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<h2>Flip toggle switches</h2>
<p>A binary "flip" switch is a common UI element on mobile devices that is used for any binary on/off or true/false type of data input. You can either drag the flip handle like a slider or tap on each half of the switch.</p>
<p>To create a flip toggle, To add a slider widget to your page, start with an <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. 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;slider2&quot;&gt;Select slider:&lt;/label&gt;
&lt;select name=&quot;slider2&quot; id=&quot;slider2&quot; data-role=&quot;slider&quot;&gt;
&lt;option value=&quot;off&quot;&gt;Off&lt;/option&gt;
&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
</code></pre>
<p>The flip toggle switch is displayed like this:</p>
<div data-role="fieldcontain">
<label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<h2>Radiobuttons</h2>
<p>Radiobuttons are used to provide a list of options where only a single item can be selected. Traditional desktop radiobuttons are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the radiobuttons so they are larger and look clickable. A custom set of icons are added to the label to provide visual feedback.</p>
<p>To create a flip toggle, To add a slider widget to your page, start with an <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. 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;slider2&quot;&gt;Select slider:&lt;/label&gt;
&lt;select name=&quot;slider2&quot; id=&quot;slider2&quot; data-role=&quot;slider&quot;&gt;
&lt;option value=&quot;off&quot;&gt;Off&lt;/option&gt;
&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
</code></pre>
<p>A radiobutton list is displayed like this:</p>
<fieldset data-role="controlgroup" data-role="fieldcontain">
<legend>Choose one:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Choice 3</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Choice 4</label>
</fieldset>
</form>

358
docs/forms/forms-themes.html Executable file
View file

@ -0,0 +1,358 @@
<!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>Theming forms</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Body swatch A</h2>
<div class="ui-body ui-body-a">
<div data-role="fieldcontain">
<label for="name-a">Text Input:</label>
<input type="text" name="name" id="name-a" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-a">Flip switch:</label>
<select name="switch-a" id="switch-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-a">Slider:</label>
<input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
<label for="checkbox-6a">b</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
<label for="checkbox-7a"><em>i</em></label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
<label for="checkbox-8a">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
<label for="radio-choice-1a">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
<label for="radio-choice-2a">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
<label for="radio-choice-3a">Hampster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
<label for="radio-choice-4a">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div><!-- /body-a -->
<h2>Body swatch B</h2>
<div class="ui-body ui-body-b">
<div data-role="fieldcontain">
<label for="name-b">Text Input:</label>
<input type="text" name="name" id="name-b" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-b">Flip switch:</label>
<select name="switch-b" id="switch-b" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-b">Slider:</label>
<input type="range" name="slider" id="slider-b" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6b" id="checkbox-6b" class="custom" />
<label for="checkbox-6b">b</label>
<input type="checkbox" name="checkbox-7b" id="checkbox-7b" class="custom" />
<label for="checkbox-7b"><em>i</em></label>
<input type="checkbox" name="checkbox-8b" id="checkbox-8b" class="custom" />
<label for="checkbox-8b">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-1" />
<label for="radio-choice-1b">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2b" value="choice-2" />
<label for="radio-choice-2b">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3b" value="choice-3" />
<label for="radio-choice-3b">Hampster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4b" value="choice-4" />
<label for="radio-choice-4b">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-b" class="select">Choose shipping method:</label>
<select name="select-choice-b" id="select-choice-b">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div><!-- /body-b -->
<h2>Body swatch C</h2>
<div class="ui-body ui-body-c">
<div data-role="fieldcontain">
<label for="name-c">Text Input:</label>
<input type="text" name="name" id="name-c" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-c">Flip switch:</label>
<select name="switch-c" id="switch-c" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-c">Slider:</label>
<input type="range" name="slider" id="slider-c" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
<label for="checkbox-6c">b</label>
<input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
<label for="checkbox-7c"><em>i</em></label>
<input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
<label for="checkbox-8c">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" />
<label for="radio-choice-1c">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2" />
<label for="radio-choice-2c">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3" />
<label for="radio-choice-3c">Hampster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4" />
<label for="radio-choice-4c">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-c" class="select">Choose shipping method:</label>
<select name="select-choice-c" id="select-choice-c">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div><!-- /body-c -->
<h2>Body swatch D</h2>
<div class="ui-body ui-body-d">
<div data-role="fieldcontain">
<label for="name-d">Text Input:</label>
<input type="text" name="name" id="name-d" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-d">Flip switch:</label>
<select name="switch-d" id="switch-d" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-d">Slider:</label>
<input type="range" name="slider" id="slider-d" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6d" id="checkbox-6d" class="custom" />
<label for="checkbox-6d">b</label>
<input type="checkbox" name="checkbox-7d" id="checkbox-7d" class="custom" />
<label for="checkbox-7d"><em>i</em></label>
<input type="checkbox" name="checkbox-8d" id="checkbox-8d" class="custom" />
<label for="checkbox-8d">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1d" value="choice-1" />
<label for="radio-choice-1d">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2d" value="choice-2" />
<label for="radio-choice-2d">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3d" value="choice-3" />
<label for="radio-choice-3d">Hampster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4d" value="choice-4" />
<label for="radio-choice-4d">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-d" class="select">Choose shipping method:</label>
<select name="select-choice-d" id="select-choice-d">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div><!-- /body-d -->
<h2>Body swatch E</h2>
<div class="ui-body ui-body-e">
<div data-role="fieldcontain">
<label for="name-e">Text Input:</label>
<input type="text" name="name" id="name-e" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-e">Flip switch:</label>
<select name="switch-e" id="switch-e" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-e">Slider:</label>
<input type="range" name="slider" id="slider-e" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6e" id="checkbox-6e" class="custom" />
<label for="checkbox-6e">b</label>
<input type="checkbox" name="checkbox-7e" id="checkbox-7e" class="custom" />
<label for="checkbox-7e"><em>i</em></label>
<input type="checkbox" name="checkbox-8e" id="checkbox-8e" class="custom" />
<label for="checkbox-8e">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1e" value="choice-1" />
<label for="radio-choice-1e">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2e" value="choice-2" />
<label for="radio-choice-2e">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3e" value="choice-3" />
<label for="radio-choice-3e">Hampster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4e" value="choice-4" />
<label for="radio-choice-4e">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-e" class="select">Choose shipping method:</label>
<select name="select-choice-e" id="select-choice-e">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div><!-- /body-e -->
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

3
docs/forms/index.html
View file

@ -18,14 +18,15 @@
<p>All form elements begin with standard html controls that are enhanced to make them more attractive and easy-to-use. In browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.</p>
<ul data-role="listview" data-inset="true">
<li><a href="forms-all.html">All form elements</a></li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
<li><a href="forms-text.html">Text inputs</a></li>
<li><a href="forms-search.html">Search inputs</a></li>
<li><a href="forms-slider.html">Slider</a></li>
<li><a href="forms-switch.html">Flip toggle switch</a></li>
<li><a href="forms-radiobuttons.html">Radio buttons</a></li>
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
<li><a href="forms-selects.html">Select menus</a></li>
<li><a href="forms-themes.html">Theming forms</a></li>
<li><a href="api-forms.html">API documentation</a></li>
</ul>