<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Accessible Table-less forms
</title>
<style type="text/css" media="all">
#content_half1
{
float:left;
border: 1px dashed #333;
background-color: #0028ff;
min-width:300px;
min-height:300px;
max-width:600px;
max-height:600px;
}
#content_half2
{
float:left;
border: 1px dashed #333;
background-color: #ffffff;
min-width:20px;
min-height:20px;
max-width:20px;
max-height:20px;
}
#content_half3
{
float:left;
border: 1px dashed #333;
background-color: #0028ff;
min-width:300px;
min-height:300px;
max-width:600px;
max-height:600px;
}
form, label, input { font-size : 1em; }
fieldset { width : 25em; padding : 0.5em 1em; }
label { position : relative; width : 15em; display : block; margin : .5em 0em; }
label input { position : absolute; left : 100%; top : 0px; width : 10em; }
input.submit { margin-left : 15em; }
br { display : none; }
</style>
</head>
<body>
<h1>CSS Forms
</h1>
<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>
<div id="content_half1">
<fieldset>
<legend>Personal details
</legend>
<label>Name:
<input type="text" name="name" /></label><br />
<label>Email:
<input type="text" name="email" /></label><br />
<label>Telephone:
<input type="text" name="tel" /></label><br />
<input type="submit" value="Submit" class="submit" />
</fieldset>
</div>
<div id="content_half2">
</div>
<div id="content_half3">
<fieldset>
<legend>Personal details
</legend>
<label>Name:
<input type="text" name="name" /></label><br />
<label>Email:
<input type="text" name="email" /></label><br />
<label>Telephone:
<input type="text" name="tel" /></label><br />
<input type="submit" value="Submit" class="submit" />
</fieldset>
</div>
</body>
</html>