Form Layout

Home

We've all done forms with tables right? They're probably the most excepted method and are a snap if you have complicated forms that need to be positioned just so.

Using CSS to style and position your forms needs a little change of thinking in how a form should look. You could probably recreate any table based form with CSS but it would be a nightmare if the form is complex.

This example uses a fairly simplistic contact form just to demonstrate how you might do it. It's by no means conclusive but might provide a little help for those that want to experiment.

Click here to see an example, or have a look at the code below:

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.1//EN" "xhtml11.dtd"> 
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Laying out a form with CSS</title>
<style type="text/css" media="all">
<!--       
body {       
  background-color: #FFFFFF;       
  color: #000000;       
  margin: 0 20% 0 20%;       
}       
h1 {
  font-family: Arial, Helvetica, sans-serif;       
  font-size: 1.5em;       
}       
p {
  font-family: Verdana, Arial, Helvetica, sans-serif;       
}       
fieldset {
  margin: 0 0 2em 0;       
  padding: 1em .5em .5em .5em;       
  border: 1px solid #000000;
}       
legend {
  padding: .2em;       
  background-color: #EBEBFF;       
  font-weight: bold;       
  color: #000000;       
  border: 1px solid #000000;       
}       
input {
  border: 1px solid #000000;       
  font-weight: bold;       
  background-color: #F5F5F5;       
}
-->     
</style>   
</head>
<body>
  <form method="post" action="">
    <fieldset>
      <legend>Personal details</legend>
      <p><label for="Name"> Name:</label><br />
      <input type="text" name="name" id="Name" /></p>
      <p><label for="Email">Email:</label><br />
      <input type="text" name="email" id="Email" /></p>
      <p><label for="Tel">Telephone:</label><br />
      <input type="text" name="tel" id="Tel" /></p>
    </fieldset>
    <fieldset>
      <legend>Submit your details</legend>
      <p><input type="submit" value="Submit" /></p>
    </fieldset>     
  </form>
</body>
</html>

The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.