mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
184 lines
No EOL
6.5 KiB
HTML
Executable file
184 lines
No EOL
6.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>Forms</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<form action="#" method="get">
|
|
|
|
|
|
<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">
|
|
<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" />
|
|
</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" />
|
|
</div>
|
|
|
|
<div data-role="fieldcontain">
|
|
<label for="slider2">Select slider:</label>
|
|
<select name="slider2" id="slider2" data-role="slider">
|
|
<option value="off">Off</option>
|
|
<option value="on">On</option>
|
|
</select>
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
<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>
|
|
</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">
|
|
<legend>Font styling:</legend>
|
|
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
|
|
<label for="checkbox-6">b</label>
|
|
|
|
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
|
|
<label for="checkbox-7"><em>i</em></label>
|
|
|
|
<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 data-role="fieldcontain">
|
|
<label for="select-choice-1" class="select">Few options:</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>
|
|
</select>
|
|
</div>
|
|
|
|
<div data-role="fieldcontain">
|
|
<label for="select-choice-3" class="select">Many options:</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>
|
|
</select>
|
|
</div>
|
|
</fieldset>
|
|
|
|
|
|
|
|
<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>
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |