ipb4-form-example.html

<div class='ipsWidget ipsWidget_vertical ipsBox'>
	<h3 class='ipsType_reset ipsWidget_title'>Form Header</h3>
	<form accept-charset="utf-8" method="post" class="ipsForm_horizontal ipsSpacer_top">
		<!-- TEXT FIELD -->
		<ul class='ipsForm'>
			<li class="ipsFieldRow ipsPad_half ipsClearfix">
				<div class="ipsFieldRow_title ">
					Text Field <span class="ipsFieldRow_required">Required</span>	
				</div>
				<div class="ipsFieldRow_content">
					<input type="text" name="" value=""><br>
					<span class="ipsFieldRow_desc">
						Optional description text.
					</span>
				</div>
			</li>
			
			<!-- SELECT BOX -->
			<li class="ipsFieldRow ipsPad_half ipsClearfix ">
				<div class="ipsFieldRow_title">
					Select Box
					<span class="ipsFieldRow_required">Required</span>
					
				</div>
				<div class="ipsFieldRow_content">
					<select class="">
						<option value="">Select Option 1</option>
						<option value="">Select Option 2</option>
						<option value="">Select Option 3</option>
						<option value="">Select Option 4</option>
						<option value="">Select Option 5</option>
					</select>
					<br>
					<span class="ipsType_warning"></span>
				</div>
			</li>
			
			<!-- MULTIPLE SELECT BOX -->
			<li class="ipsFieldRow ipsPad_half  ipsClearfix ">
				<div class="ipsFieldRow_title ">
					Multiple Select Box
					<span class="ipsFieldRow_required">Required</span>
				</div>
				<div class="ipsFieldRow_content ">

					<select name="" class="" multiple="">
						<option value="">Select Option 1</option>
						<option value="">Select Option 2</option>
						<option value="">Select Option 3</option>
						<option value="">Select Option 4</option>
						<option value="">Select Option 5</option>
					</select>
					<br>
					<span class="ipsType_warning"></span>
				</div>
			</li>
			
			<!-- YES/NO Checkbox -->
			<li class="ipsFieldRow ipsPad_half ipsFieldRow_yesNo ipsClearfix">
				<div class="ipsFieldRow_title ">
					Yes / No
					<span class="ipsFieldRow_required">Required</span>
				</div>
				<div class="ipsFieldRow_content">
					<input type="hidden" name="toggle_value" value="0">
					<input type="checkbox" role="checkbox" value="1" checked="" aria-checked="true" data-ipstoggle="" style="display: none;"> <span class="ipsToggle ipsToggle_on" tabindex="0"><span data-role="status">On</span></span>
					<br>
					<span class="ipsFieldRow_desc">
						This "checkbox" alternative requires Javascript which we have not yet begun to document.
					</span>
				</div>
			</li>
		</ul>
		<div class="ipsAreaBackground_light ipsClearfix ipsPad ipsType_center">
			<button type="submit" class="ipsButton ipsButton_primary" accesskey="s" role="button">Save</button>
		</div>
	</form>
</div>