Snippets

Home / Snippets / tabless form using css

tabless form using css

Snippet Menu

snippet |

revisions |

comments | Related Snippets

related |

Add to Favorites | Email

download | Print

print | Blog It

blog it

Sat. Mar. 8th, 2008 2:08 PM

1 of 1

ysg

CSS | HTML

1 comments

check title ; ) unfortunately cannot remember the name(s) of the author(s) , so the courtesy goes to them ...

<!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>