tests/html5Forms/autofocus.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<link type="text/css" rel="stylesheet" href="css/form.css" />
		
		
		<title>HTML5 autofocus Attribute Test</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<!-- Needed for Forms Feature Detection -->
		<script type="text/javascript" src="../../shared/js/modernizr.com/Modernizr-2.5.3.forms.js">
		</script>
		
		<!-- Needed for Validation --> 
		<script type="text/javascript" src="../../shared/js/html5Forms.js" data-webforms2-support="autofocus" data-webforms2-force-js-validation="true">
		</script>
		 
	
		
		
	</head>
	<body id="myExample">
		<div id="exampleBlurb">
		<p>
				This is an example of a HTML5 form using the <code>autofocus</code> attribute.
				When the page loads, it will focus on the first form field automatically.
					<a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article </a>
			</p>
		</div>
		
		
		<form action="http://www.useragentman.com/testForm.php">
			<fieldset>
			<legend>Personal Information</legend>
		
			<p>Thank you for giving to the Zoltan Hawryluk Entertainment Fund.  Your
			contribution will ensure that Webmasters in Need will be able to buy
			beer when they would otherwise do without.</p>
		
			<p>Form fields labelled <img src="images/asterix.gif" alt="*"/> are mandatory</p>
			<table class="formTable">
				<tr>
					<th>Full Name :</th>
					<td><input type="text" name="fullName" value="" 
						required="required" 
						autofocus="autofocus"
						placeholder="Required information" />
					<div class="description"><strong>Required.</strong> If you would like to give anonymously,
					tough.  We find people are more generous when their Good
					Name is on the line.</div>
					</td>
				</tr>
				
				<tr>
					<th>Company Name :</th>
					<td><input type="text" name="companyName" value=""  />
					<div class="description">If you are unemployed, please leave 
					blank.</div>
					</td>
				</tr>
				
				<tr>
					<th>Zip Code</th>
					<td><input type="text" name="postalCode" value="" required="required" 
						pattern="(\d{5}([\-]\d{4})?)" data-errormessage="This must be a valid zip code."
					/>
					<div class="description">Please enter a valid American zip code. 
					Valid format is <strong>nnnnn</strong> or <strong>nnnnn-nnnn</strong>
					where <strong>n</strong>
					is a numeric digit.</div>
					
					</td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" value="Submit Information"/></td>
				</tr>
			</table>
			</fieldset>
		</form>
	</body>
</html>