<html>
<head>
<title>Abakada HTML Demo: Accessible Form Sample</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
<!--
fieldset, td {color: navy }
fieldset { border-radius: 18px }
form { width: 50%; background: khaki; margin: 20; padding: 10; border-radius: 18px }
-->
</style>
</head>
<body>
<div class="header"><h2>Abakada HTML Demo: <b>Accessible Form</b> Sample</h2></div>
<hr size=1 width=92%>
<div align="center">
<p>This example demonstrates an accessible form using the <b>FIELDSET</b>, <b>LEGEND</b> and <b>LABEL</b> objects. <br>
The <b>FIELDSET</b> defines the container for the form and the <b>LEGEND</b> provides a name to the <b>FIELDSET</b>. <br>
Each control title makes use of the <b>LABEL</b> object and the <b>FOR</b> style attribute.
<p>To access each form field, the user can either click on the text field, click on the label, use the TAB key, or press ALT + the underlined key. </p>
<form>
<fieldset>
<legend>Accessibility Form</legend>
<table cellpadding=5>
<tr>
<th>Label</th>
<th>Control</th></tr>
<tr>
<td><label for=ofirstname tabindex=-1><u>F</u>irst Name</label></td>
<td><input accessKey=f id=ofirstname name=firstname tabindex=1></td></tr>
<tr>
<td><label for=olastname tabindex=-1><u>L</u>ast Name</label></td>
<td><input accessKey=l id=olastname name=lastname tabindex=2></td></tr>
<tr>
<td><label for=oselect1 tabindex=-1>Favorite <u>P</u>astime</label></td>
<td><select accessKey=p id=oselect1 name=select1 tabindex=3>
<option selected>Web
<option>Movies
<option>Concerts
<option>Pubs
<option>Books</option></select></td></tr>
</table>
</fieldset>
</form>
<p>By clicking on a control label, the specified control is given focus. <br>
In addition to using <b>LABEL</b>, the <b>ACCESSKEY</b> style attribute specifies an acceleration key to give the form focus. <br>
Each acceleration key is underlined in the label for easy identification. </p>
</div>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>