');
document.write('
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/xhtml11.dtd"> ');
document.write('
<html> ');
document.write('
<head> ');
document.write('
<meta http-equiv="Content-Type" content="text/html;
');
document.write('charset=ISO-8859-1" /> ');
document.write('
<title>Accessible Table-less forms
</title> ');
document.write('
<style type="text/css" media="all"> ');
document.write(' #content_half1
');
document.write(' {
');
document.write(' float:left;
');
document.write(' border: 1px dashed #333;
');
document.write(' background-color: #0028ff;
');
document.write(' min-width:300px;
');
document.write(' min-height:300px;
');
document.write(' max-width:600px;
');
document.write(' max-height:600px;
');
document.write(' }
');
document.write(' #content_half2
');
document.write(' {
');
document.write(' float:left;
');
document.write(' border: 1px dashed #333;
');
document.write(' background-color: #ffffff;
');
document.write(' min-width:20px;
');
document.write(' min-height:20px;
');
document.write(' max-width:20px;
');
document.write(' max-height:20px;
');
document.write(' }
');
document.write('
');
document.write(' #content_half3
');
document.write(' {
');
document.write(' float:left;
');
document.write(' border: 1px dashed #333;
');
document.write(' background-color: #0028ff;
');
document.write(' min-width:300px;
');
document.write(' min-height:300px;
');
document.write(' max-width:600px;
');
document.write(' max-height:600px;
');
document.write(' }
');
document.write('
');
document.write('form, label, input { font-size : 1em; }
');
document.write('fieldset { width : 25em; padding : 0.5em 1em; }
');
document.write('label { position : relative; width : 15em; display : block; margin : .5em 0em; }
');
document.write('label input { position : absolute; left : 100%; top : 0px; width : 10em; }
');
document.write('input.submit { margin-left : 15em; }
');
document.write('br { display : none; }
');
document.write('
</style> ');
document.write('
</head> ');
document.write('
');
document.write('
<body> ');
document.write('
<h1>CSS Forms
</h1> ');
document.write('
<p>This page is based entirerly on CSS. No tables whatsoever. It\'s fast, accessible, and probably the most elegant way to make table-less forms today. Check it out yourself...
</p> ');
document.write('
');
document.write('
');
document.write('
');
document.write('
<div id="content_half1">');
document.write('
<fieldset> ');
document.write('
<legend>Personal details
</legend> ');
document.write('
');
document.write('
<label>Name:
<input type="text" name="name" /></label><br /> ');
document.write('
<label>Email:
<input type="text" name="email" /></label><br /> ');
document.write('
<label>Telephone:
<input type="text" name="tel" /></label><br /> ');
document.write('
');
document.write('
<input type="submit" value="Submit" class="submit" /> ');
document.write('
</fieldset> ');
document.write('
');
document.write('
</div>');
document.write('
<div id="content_half2">');
document.write('
</div>');
document.write('
<div id="content_half3">');
document.write('
<fieldset> ');
document.write('
<legend>Personal details
</legend> ');
document.write('
');
document.write('
<label>Name:
<input type="text" name="name" /></label><br /> ');
document.write('
<label>Email:
<input type="text" name="email" /></label><br /> ');
document.write('
<label>Telephone:
<input type="text" name="tel" /></label><br /> ');
document.write('
');
document.write('
<input type="submit" value="Submit" class="submit" /> ');
document.write('
</fieldset> ');
document.write('
');
document.write('
</div>');
document.write('
');
document.write('
</body> ');
document.write('
</html>');
document.write('