<form class="lotusForm2" method="post" action="javascript:;" aria-live="assertive">
<!--No error handling demonstrated in this version to trim down the code, however, inline errors icons are added to show where they would appear.-->

		<!-- form header (use a div instead of a header tag if you aren't using html5) -->
		<header class="lotusFormTitle">
			<h1 class="lotusHeading" aria-describedby="formDesc">Form Title</h1>
			<div id="formDesc" class="lotusMeta">This form demonstrates some of the "extras" you can put in forms.</div>
		</header>
		
		<!-- form body -->
		<div class="lotusFormBody">
		
		<!-- tabs -->
		<div class="lotusTabContainer" role="tablist">
		  <ul class="lotusTabs">
			<!--put class="lotusSelected" on the li element of the selected tab-->
			<li class="lotusSelected"><div><a id="tab1id" role="tab" selected="true" href="javascript:;"><strong>Tab1</strong></a></div></li>
			<li><div><a id="tab2id" role="tab" href="javascript:;">Tab2</a></div></li>
		  </ul>
		</div><!--end tab container-->
		<div role="tabpanel" aria-labelledby="tab1id" aria-hidden="false">

		<!-- section -->
		<div class="lotusFormSection">		
		<!-- form section header (use a div instead of a header tag if you aren't using html5) -->
		<header class="lotusFormSectionHeader"><a class="lotusArrow" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="twisty arrow expanded" /><span class="lotusAltText">&#x25bc;</span></a><h2 class="lotusHeading2"><a href="javascript:;">Collapsable Form Section</a></h2></header>
		<div class="lotusFormSectionBody">
		
			<div class="lotusFormField">
				<label for="title"><span class="lotusFormRequired" title="Required field">*</span>Title:</a></label>
				 <div class="lotusFieldWrapper"><input class="lotusText" type="text" id="title" name="title" value="" aria-required="true" /></div>
				 <span class="lotusFormErrorIcon"><img class="lotusIconMsgError" src="../../css/images/blank.gif" alt="Error" /><span class="lotusAltText">X</span></span>
			</div>		
			
			<div class="lotusFormField">
				<label for="upload"><span class="lotusFormRequired" title="Required field">*</span>Upload a file:</label>
				<div class="lotusFieldWrapper"><input type="file" id="upload" name="upload" value="" aria-required="true" /></div>
				<span class="lotusFormErrorIcon"><img class="lotusIconMsgError" src="../../css/images/blank.gif" alt="Error" /><span class="lotusAltText">X</span></span>
			</div>	
							
		</div></div><!--end form section-->
		
		<div class="lotusFormSection">
		<!-- header is an HTML5 element. Use div if you are using HTML4. -->
		<header class="lotusFormSectionHeader">
			<h2 class="lotusHeading2" aria-describedby="sectionDesc"><a href="javascript:;">Form Section</a></h2>
			<div id="sectionDesc" class="lotusMeta">Some descriptive text</div>
		</header>
		<div class="lotusFormSectionBody">
			
			<div class="lotusFormField">
				<label for="chooser">Select:</label>
				<div class="lotusFieldWrapper"><select id="chooser" name="chooser"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></select></div>
				<span class="lotusFormErrorIcon"><img class="lotusIconMsgError" src="../../css/images/blank.gif" alt="Error" /><span class="lotusAltText">X</span></span>					
			</div>
			
			<div class="lotusFormField"><a href="javascript:;">Perform an Action</a></div>
			
		</div></div><!--end form section-->
		
		<div class="lotusFormField lotusMeta" title="Legend">* Required</div>
		
	</div><!--end tab panel-->
	</div><!--end form body-->		
	
	<!-- form footer -->	
	<div class="lotusFormFooter">
		<input name="yourSaveButtonName" type="submit" value="Save" class="lotusBtn" /> <input name="yourCancelButtonName" value="Cancel" class="lotusBtn" type="button" />
	</div>
</form>