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