snapshot
/
html5testapp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
							<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Forms</title> 
	<link rel="stylesheet"  href="../../jquery.mobile-1.0.1.min.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../jquery.js"></script>
	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
	<script src="../_assets/js/jqm-docs.js"></script>
	<script src="../../jquery.mobile-1.0.1.min.js"></script>
</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Theming forms</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">
	
    <h2>Form themes</h2>
    <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automatically adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code> data-theme</code> attribute can be applied any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p> 
    
    <p>All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a <code> data-theme</code> swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.</p>
			
		
	<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">Hamster</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">Hamster</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">Hamster</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">Hamster</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">Hamster</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-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

					<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><a href="textinputs/">Text inputs</a></li>
						<li><a href="search/">Search inputs</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>
						<li data-theme="a"><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>
						

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2011-2012 The jQuery Project</p>
	</div>

	</div><!-- /page -->

	</body>
	</html>